Stapelreihenfolge von Spalten auf Mobilgeräten beeinflussen
-
Hallo Zusammen,
Ich habe das Problem auf meiner Webiste, dass ich auf meinen Seiten sehr gerne Spalten benutze. Nun habe ich aber gemerkt, dass wenn sich die Spalten aufeinanderstapeln, sich die Reihenfolge ändert. Damit das Design auf dem Desktop aber ansprechend bleibt kann ich diese Spaltenreihenfolge nicht einfach ändern.
Hier ein Bild der Desktop-Seite:

Wie ihr seht wechseln sich Text und Bild immer ab.
Auf Mobilgeräten sieht das aber so aus:

Die Gesichter sind absichtlich durchgestrichen.
Gibt es eine Möglichkeit, wie ich die Stapelreihenfolge auf Mobilgeräten anpassen kann, damit der Titel auch oberhalb des Inhaltes ist und nicht unterhalb?
Ich habe mich bereits einmal erkundigt und herausgefunden dass man eine CSS anpassung machen kann. Ich habe das aber nicht verstanden und weiss nicht, ob ich dann für jede seite einzeln sagen kann, welche spalte oben ist im Stapel.
Vielen Dank schon im Vorab für eure Hilfe!
LG
Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]
-
Die Gesichter sind absichtlich durchgestrichen.
Dann musst du sie aber auch auf der Webseite durchstreichen. 😀 😀 😀
Du findest unter Werkzeuge > Websitezustand > Info einen Bericht zur Website. Warte bitte einen Moment bis die Ladeanzeige ganz oben abgeschlossen ist und kopiere dann per Button den Website-Bericht in deine Zwischenablage. Über den Button „Bericht in die Zwischenablage kopieren“ kannst du den Bericht unverändert (bitte mit den Akzentzeichen am Anfang und Ende) einfügen und anschließend hier posten. Evtl. ergeben sich dann weitere Anhaltspunkte, ob und wo das Problem liegt.
Guten Morgen,
Ich habe die Bilder nur hier durchgestrichen wegen den Bildrechten. Ich darf die Bilder auf keinen externen Seiten veröffentlichen. Also zumindest die durchgestrichenen.
Hier der Bericht den du Brauchst:
` wp-core
version: 6.7.1
site_language: de_CH_informal
user_language: de_CH_informal
timezone: Europe/Zurich
permalink: /blog/%year%/%monthnum%/%day%/%postname%/
https_status: true
multisite: true
user_registration: true
blog_public: 1
default_comment_status: undefined
environment_type: production
site_id: 1
site_count: 4
network_count: 1
user_count: 1
dotorg_communication: true wp-dropins (2)
advanced-cache.php: true
object-cache.php: true wp-active-theme
name: Twenty Twenty-Four (twentytwentyfour)
version: 1.3
author: the WordPress team
author_website: https://wordpress.org
parent_theme: none
theme_features: core-block-patterns, post-thumbnails, responsive-embeds, editor-styles, html5, automatic-feed-links, widgets-block-editor, block-templates
theme_path: /home/icukawop/www/arrowforfuture.ch/wp-content/themes/twentytwentyfour
auto_update: Deaktiviert wp-themes-inactive (2)
Twenty Twenty-Five: version: 1.0, author: the WordPress team, Automatische Aktualisierungen deaktiviert
Twenty Twenty-Three: version: 1.6, author: WordPress-Team, Automatische Aktualisierungen deaktiviert wp-mu-plugins (2)
burst_rest_api_optimizer.php: author: (undefined), version: (undefined)
Domain Mapping System Helper: version: 1.0.0, author: Gaucho Plugins wp-plugins-active (10)
Auto Focus Keyword for SEO: version: 1.0.2, author: Pagup, Automatische Aktualisierungen deaktiviert
Broken Link Checker: version: 2.4.2, author: WPMU DEV, Automatische Aktualisierungen deaktiviert
Burst Statistics - Privacy-Friendly Analytics for WordPress: version: 1.7.4, author: Burst Statistics - Stats & Analytics for WordPress, Automatische Aktualisierungen deaktiviert
Complianz | GDPR/CCPA Cookie Consent: version: 7.2.0, author: Really Simple Plugins, Automatische Aktualisierungen deaktiviert
Forminator: version: 1.38.3, author: WPMU DEV, Automatische Aktualisierungen deaktiviert
Rank Math SEO: version: 1.0.236, author: Rank Math SEO, Automatische Aktualisierungen deaktiviert
Real Media Library (Free): version: 4.22.28, author: devowl.io, Automatische Aktualisierungen deaktiviert
Redirect Redirection: version: 1.2.5, author: Inisev, Automatische Aktualisierungen deaktiviert
Solid Security Basic: version: 9.3.6, author: SolidWP, Automatische Aktualisierungen deaktiviert
W3 Total Cache: version: 2.8.3, author: BoldGrid, Automatische Aktualisierungen deaktiviert wp-plugins-inactive (9)
CleverReach® WP: version: 1.5.20, author: CleverReach GmbH & Co. KG, Automatische Aktualisierungen deaktiviert
Countdown Block: version: 1.2.8, author: WPDeveloper, Automatische Aktualisierungen deaktiviert
Events Manager: version: 6.6.3, author: Pixelite, Automatische Aktualisierungen deaktiviert
FluentSMTP: version: 2.2.83, author: FluentSMTP & WPManageNinja Team, Automatische Aktualisierungen deaktiviert
hCaptcha for WP: version: 4.9.0, author: hCaptcha, Automatische Aktualisierungen deaktiviert
MailPoet: version: 5.6.2, author: MailPoet, Automatische Aktualisierungen deaktiviert
Newsletter, SMTP, Email marketing and Subscribe forms by Brevo: version: 3.1.92, author: Brevo, Automatische Aktualisierungen deaktiviert
Rs Christmas Trees: version: 1.0.1, author: khorshed Alam, Automatische Aktualisierungen deaktiviert
WebToffee WP Backup and Migration: version: 1.5.4, author: WebToffee, Automatische Aktualisierungen deaktiviert wp-media
image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1809
imagemagick_version: ImageMagick 7.1.1-26 Q16-HDRI amd64 21914 https://imagemagick.org
imagick_version: 3.7.0
file_uploads: 1
post_max_size: 64M
upload_max_filesize: 64M
max_effective_size: 64 MB
max_file_uploads: 20
imagick_limits:
imagick::RESOURCETYPE_AREA: 990 GB
imagick::RESOURCETYPE_DISK: 9.2233720368548E+18
imagick::RESOURCETYPE_FILE: 1536
imagick::RESOURCETYPE_MAP: 495 GB
imagick::RESOURCETYPE_MEMORY: 247 GB
imagick::RESOURCETYPE_THREAD: 1
imagick::RESOURCETYPE_TIME: 0
imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, APNG, ART, ARW, ASHLAR, AVI, AVIF, AVS, BAYER, BAYERA, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUBE, CUR, CUT, DATA, DCM, DCR, DCRAW, DCX, DDS, DFONT, DNG, DOT, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, EXR, FARBFELD, FAX, FF, FILE, FITS, FL32, FLV, FRACTAL, FTP, FTS, FTXT, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, GV, HALD, HDR, HEIC, HEIF, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, J2C, J2K, JBG, JBIG, JNG, JNX, JP2, JPC, JPE, JPEG, JPG, JPM, JPS, JPT, JSON, JXL, K25, KDC, KERNEL, LABEL, M2V, M4V, MAC, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPEG, MPG, MPO, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, ORA, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PHM, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, POCKETMOD, PPM, PS, PS2, PS3, PSB, PSD, PTIF, PWP, QOI, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGB565, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, STRIMG, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TM2, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMF, WMV, WMZ, WPG, X3F, XBM, XC, XCF, XPM, XPS, XV, YAML, YCbCr, YCbCrA, YUV
gd_version: 2.3.3
gd_formats: GIF, JPEG, PNG, WebP, BMP, AVIF, XPM
ghostscript_version: 10.03.1 wp-server
server_architecture: FreeBSD 13.4-RELEASE-p2 amd64
httpd_software: Apache
php_version: 8.1.31 64bit
php_sapi: cgi-fcgi
max_input_variables: 1000
time_limit: 30
memory_limit: 256M
max_input_time: 60
upload_max_filesize: 64M
php_post_max_size: 64M
curl_version: 8.10.1 OpenSSL/1.1.1w
suhosin: false
imagick_availability: true
pretty_permalinks: true
htaccess_extra_rules: true
current: 2025-01-23T06:22:29+00:00
utc-time: Thursday, 23-Jan-25 06:22:29 UTC
server-time: 2025-01-23T07:22:27+01:00 wp-database
extension: mysqli
server_version: 10.6.19-MariaDB-log
client_version: mysqlnd 8.1.31
max_allowed_packet: 67108864
max_connections: 400 wp-constants
WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /home/icukawop/www/arrowforfuture.ch/wp-content
WP_PLUGIN_DIR: /home/icukawop/www/arrowforfuture.ch/wp-content/plugins
WP_MEMORY_LIMIT: 64M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: false
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: false
WP_CACHE: true
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: undefined
WP_DEVELOPMENT_MODE: undefined
DB_CHARSET: utf8mb4
DB_COLLATE: undefined wp-filesystem
wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable
fonts: writable
mu-plugins: writable solid-security
pro: free
initial_build: 4128
activated: 2025-01-22 19:24:41
patchstack: false
modules:
0: ban-users
1: firewall
2: brute-force
3: network-brute-force
4: backup
5: security-check-pro
6: malware-scheduling
7: two-factor
settings: {"firewall":{"max_attempts_host":10,"check_period":30},"backup":{"enabled":false,"interval":3,"method":"email","retain":0,"zip":true,"exclude":6},"two-factor":{"available_methods":"all","custom_available_methods":["Two_Factor_Totp","Two_Factor_Email","Two_Factor_Backup_Codes"],"disable_first_login":false},"global":{"write_files":true,"lockout_period":15,"blacklist_period":7,"blacklist":true,"blacklist_count":3,"automatic_temp_auth":true,"lockout_white_list":0,"log_type":"database","proxy":"automatic","proxy_header":"HTTP_X_FORWARDED_FOR","hide_admin_bar":false},"system-tweaks":{"protect_files":true,"directory_browsing":true,"uploads_php":true,"plugins_php":true,"themes_php":true},"wordpress-tweaks":{"file_editor":true,"disable_xmlrpc":"enable","allow_xmlrpc_multiauth":false,"rest_api":"default-access","valid_user_login_type":"both","force_unique_nicename":false,"disable_unused_author_pages":false},"hide-backend":{"enabled":false}}
patchstack-firewall-rules: undefined
user-firewall-rules: undefined
total-backups: undefined
active-vulnerabilities: 0
patched-vulnerabilities: 0
two-factor-users: undefined
user_groups: [{"roles":[],"canonical":["contributor"],"users":0,"settings":[]},{"roles":[],"canonical":["editor"],"users":0,"settings":[]},{"roles":[],"canonical":["subscriber"],"users":0,"settings":[]},{"roles":["css_js_designer"],"canonical":["administrator"],"users":0,"settings":[]},{"roles":[],"canonical":["author"],"users":0,"settings":[]}]Hallo,
ich habe das nicht so ganz verstanden, daher die Nachfrage: Soll z. B. die Spalte mit dem Bild und dem Titel „Arrow for future“ mobil vor dem Text in der Spalte „Über uns“ kommen?In dem Fall muss die Reihenfolge der Spalten mobil geändert werden. Das ist über Bordmittel beim Block Editor – so weit ich das sehe – nicht möglich, sondern nur per CSS.
Bei Block Themes wie z. B. Twenty Twenty-Four kannst du über Design > Website-Editor zusätzliches CSS eingeben.
Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):Dazu musst du bei den betreffenden Spalten-Blöcken unter „Erweitert“ bei „zusätzliche CSS-Klasse(n) die Klasse „spaltenumkehrung“ eintragen.
Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):
Füge bitte die folgende CSS-Regel unter Design > Customizer > Zusätzliches CSS am Ende ein und teste dann bitte, ob es funktioniert:
@media (max-width: 781px) { .spaltenumkehrung { flex-direction: column-reverse; } }Viele Grüße
Hans-Gerd-
Diese Antwort wurde vor 9 Monaten, 3 Wochen von
Hans-Gerd Gerhards geändert. Grund: Ergänzung
Soll z. B. die Spalte mit dem Bild und dem Titel „Arrow for future“ mobil vor dem Text in der Spalte „Über uns“ kommen?
Also die Spalte mit dem Schriftzug uf der Betonmauer soll nach der Spalte Vereinsvorstand kommen, etc.
Dein Vorschlag hat funktioniert! Vielen Dank für deine Hilfe und alles Gute!
super – freut uns. Danke für die Rückmeldung und “Gelöst”-Markieren. 👍
-
Diese Antwort wurde vor 9 Monaten, 3 Wochen von
Das Thema „Stapelreihenfolge von Spalten auf Mobilgeräten beeinflussen“ ist für neue Antworten geschlossen.

