Mobile AnsichtÄndern der Reihenfolge der divs in der mobilen Ansicht
Ich habe meine Desktop-und mobile Ansicht depective Bild hochladen. Ich habe dem Div Zahlen gegeben. Ich möchte die Reihenfolge von div ändern, wie im unteren Bild angegeben.
erwartetes Verhalten
Kann mir jemand bitte helfen hier die Reihenfolge der divs in der mobilen Ansicht zu ändern?
Verwenden bootstraps visible-xs hidden-xs Klassen html sowohl für Desktop- und mobile Ansichten
sollten alle divs sichtbar sein. Spreche nicht über versteckt. Frage nach der Änderung der Reihenfolge der divs in der mobilen Ansicht – user2349508
Mit einem einzigen HTML-Code ohne etwas zu verbergen, ist es sehr kompliziert zu implementieren @ user2349508 –
Wenn Sie die Divs verstecken es nicht sichtbar, richtig? Ich möchte, dass alle 6 Divs angezeigt werden. Aber müssen Sie die Reihenfolge ändern. Müssen die Divs mischen – user2349508
Sie können das tun, indem Sie media queries und css order property
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div[class^="d"]{
border: 3px solid black;
width: 100px;
height: 80px;
margin: 5px auto;
}
.ld{
border: 0;
width: 100px;
height: 90vh;
display: flex;
flex-wrap: wrap;
text-align: center;
margin: 0 auto;
font-size: 1.5em;
}
@media screen and (max-width:400px){
.d2{
order: 2;
}
.d3{
order: 4;
}
.d4{
order: 1;
}
.d5{
order: 3;
}
.d6{
order: 5;
}
}
</style>
</head>
<body>
<div class="ld">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
<div class="d6">6</div>
</div>
</body>
</html>
zeigen Sie Ihren Code definieren! –