divs neu anordnen, wenn die Seite auf Handy/Tablet reagiert

Im Moment habe ich 4 divs mit voller Breite (jedes div ist: halber Text, viertel Bild, viertel Bild), ich möchte das auf 8 divs mit voller Breite ändern (vollständiges Bild, Volltext x4) auf Tablet/Handy.divs neu anordnen, wenn die Seite auf Handy/Tablet reagiert

Bisher habe ich Medienabfragen, habe ich ein Bild und die andere volle Breite, aber die Reihenfolge ist nicht Bild, Text, Bild, Text usw. Es ist Bild, Text, Text, Bild, Bild, Text, Text , Bild.

Gibt es eine Möglichkeit, diese divs mit den Medienabfragen neu zu ordnen, so dass sie in der richtigen Reihenfolge sind? (Bild, Text, Bild, Text usw.).

.full-width { 
 
    padding: 20px 170px; 
 
} 
 
@media only screen and (max-width: 710px) { 
 
    .hidden_img { 
 
     display: none !important; 
 
    } 
 
\t .item-image { 
 
\t width:100% !important; 
 
\t height: 200px !important; \t 
 
\t } 
 
\t .item-text { 
 
\t \t width: 100% !important; 
 
\t } 
 
} 
 
.item-image { 
 
\t width: 24%; 
 
\t height: 100%; 
 
\t display: inline-block; 
 
\t vertical-align:middle; 
 
\t background-size: cover; 
 
} 
 
#private_1 { 
 
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/private_1.png") no-repeat; 
 
\t background-size: cover; 
 
\t background-position: center center; 
 
} 
 
#private_2 { 
 
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/private_2.png") no-repeat; 
 
\t background-size: cover; 
 
\t background-position: center center; 
 
} 
 
#corp_1 { 
 
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/corp_1.png") no-repeat; 
 
\t background-size: cover; 
 
\t background-position: center center; 
 
} 
 
#corp_2 { 
 
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/corp_2.png") no-repeat; 
 
\t background-size: cover; 
 
\t background-position: center center; 
 
} 
 
#ticket_1 { 
 
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/ticket_1.png") no-repeat; 
 
\t background-size: cover; 
 
\t background-position: center center; 
 
} 
 
#ticket_2 { 
 
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/ticket_2.png") no-repeat; 
 
\t background-size: cover; 
 
\t background-position: center center; 
 
} 
 
#day_1 { 
 
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/day_1.png") no-repeat; 
 
\t background-size: cover; 
 
\t background-position: center center; 
 
} 
 
#day_2 { 
 
\t background: url("www.kentunion.co.uk/pageassets/venue-hire/day_2.png") no-repeat; 
 
\t background-size: cover; 
 
\t background-position: center center; 
 
} 
 
.booking-container { 
 
\t  background: url("www.kentunion.co.uk/pageassets/venue-hire/venue_booking_banner.jpg") no-repeat right 0; 
 
    width: 100%; 
 
    background-size: cover; 
 
\t padding: 20px; 
 
\t margin-top: 30px; 
 
} 
 
.item-text p, .item-text h4, #intro_text { 
 
font-size: 16px !important; 
 
text-align: center; 
 
} 
 
.item-text { 
 
\t width:50%; 
 
display: inline-block; 
 
vertical-align:middle; 
 
text-align: center; 
 
padding: 0px 50px; 
 

 
} 
 
.event_info{ 
 
font-size: 16px !important; 
 
} 
 

 
.item { 
 
\t width: 100%; 
 
\t height: 250px; 
 
\t display: table; 
 
\t table-layout: fixed; 
 
} 
 

 

 
div { 
 
    background: 0 0; 
 
    border: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    vertical-align: baseline; 
 
    outline: 0; 
 
} 
 
.content-spacing { 
 
\t padding: 0 !important; 
 
} 
 
#intro_text { 
 
\t padding: 1% 9%; 
 
}

<div id="private" class="item"> 
 
\t \t \t <div class="item-image" id="private_1" style="margin-right:2%;"> 
 
\t \t \t </div> 
 
\t \t \t <div class="item-image hidden_img" id="private_2"> 
 
\t \t \t </div> 
 
\t \t \t <div class="item-text"> 
 
\t \t \t \t <h4>PRIVATE HIRE</h4> 
 
\t \t \t \t <p class="event_info">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div id="private" class="item"> 
 
\t \t \t <div class="item-text"> 
 
\t \t \t \t <h4>CORPORATE EVENTS</h4> 
 
\t \t \t \t <p class="event_info">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
\t \t \t </div> 
 
\t \t \t <div class="item-image" style="margin-right:2%;" id="corp_1"> 
 
\t \t \t </div> 
 
\t \t \t <div class="item-image hidden_img" id="corp_2"> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div id="private" class="item"> 
 
\t \t \t <div class="item-image" style="margin-right:2%;" id="ticket_1"> 
 
\t \t \t </div> 
 
\t \t \t <div class="item-image hidden_img" id="ticket_2"> 
 
\t \t \t </div> 
 
\t \t \t <div class="item-text"> 
 
\t \t \t \t <h4>TICKETED EVENTS</h4> 
 
\t \t \t \t <p class="event_info">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div id="private" class="item"> 
 
\t \t \t <div class="item-text"> 
 
\t \t \t \t <h4>DAY EVENTS</h4> 
 
\t \t \t \t <p class="event_info">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
\t \t \t </div> 
 
\t \t \t <div class="item-image" style="margin-right:2%;" id="day_1"> 
 
\t \t \t </div> 
 
\t \t \t <div class="item-image hidden_img" id="day_2"> 
 
\t \t \t </div> 
 
\t \t </div>

Quelle

2016-12-02 user3005003

Sind Sie sicher, dass Ihre Struktur ist richtig? Es scheint ein bisschen für mich zu sein. – Roberrrt

Wenn Sie keine alten Browser (vor IE10) unterstützen müssen, sollten Sie das flexbox-Modell verwenden. Es kann tun, was Sie wollen und mehr auf eine viel einfachere Art und Weise ... Hier haben Sie einen guten Link zu starten: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Vi100

Als allgemein Regel, wenn eine Lösung übermäßig komplex erscheint, dann ist es wahrscheinlich. –

Vor allen anderen verwenden Sie einen id von private für alle Ihre Container. Das ist falsch. IDs sollten für eindeutige Elemente sein. Sie sollten einen class="private" verwenden, da Ihre Artikel sich wiederholen.

Wenn Browser-Unterstützung kein Problem für Ihr Projekt zur Hand ist, würde ich vorschlagen, CSS Flex-box für Ihre Inhalte verwenden. Mithilfe dieses Ansatzes können Sie die Reihenfolge Ihrer Elemente mithilfe der CSS Order property verwalten, die Ihnen mehr Flexibilität bei Ihren Medienabfragen bietet.

In Ihrem speziellen Fall müssen Sie eine display: flex;-Eigenschaft für den Container festlegen und dann die Medienadresse verwenden, um die order-Eigenschaft an jedes der Elemente in Ihrem Container anzuhängen. Die Nummerierung beginnt hier von 0, daher werden Ihre Elemente order: 0 für erste nummerieren, order: 1 für das zweite usw.

Etwas wie:

.item { 
    display: flex; 
    } 

    .item .item-image { 
    order: 0; 
    } 

    .item .item-text { 
    order: 1; 
    } 

    .item .item-image.hidden_img { 
    order: 2; 
    }

Quelle

2016-12-02 16:39:20 snkv

divs neu anordnen, wenn die Seite auf Handy/Tablet reagiert

Antwort

Verwandte Themen