ブートストラップ3では比較的単純な2列のレイアウトを作成しようとしていますが、ページを表示するときには正確なフローを維持する必要がありますデスクトップとモバイルでブートストラップ3のモバイルレイアウトからレイアウトに定義済みの列フローを維持する
私は達成しようとしていることを説明する2つの画像があります： 同じ色のボックスは常に閉じている必要があり、内側に入れた番号はフローを指定します。モバイルビュー。
デスクトップビュー：
モバイルビュー：ここ
これではできません現在のレイアウト。
現在のレイアウトを変更したくない場合は、2を最初の行に複製し、hidden-smとvisible-smを使用しても動作します。
現在、2,5と6の列には行が含まれていませんが、列には列の子のみが含まれているため、ドキュメントによっては正しくありません。
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6 red"><h1>1</h1></div>
<div class="col-md-6 red"><h1>1</h1></div>
<!-- Duplicated block -->
<div class="col-md-6 red visible-sm"><br><br><br><br><h1>2</h1><br><br><br><br></div>
<!--if I put the blue boxes here, then I'm not able to have Red2 just below Red1 in mobile layout-->
<div class="col-md-12 blue"><br><br><br><br><h1>3</h1><br><br><br><br></div>
<div class="col-md-4 blue"><h1>4</h1></div>
<div class="col-md-8 blue"><h1>4</h1></div>
</div>
</div>
<div class="row">
<div class="col-md-6 red hidden-sm"><br><br><br><br><h1>2</h1><br><br><br><br></div>
<div class="col-md-6 yellow"><h1>5</h1></div>
<div class="col-md-6 yellow"><h1>6</h1></div>
</div>
</div>
<div class="row">
<div class="col-md-12 yellow">
<br><br><h1>7</h1><br><br>
</div>
</div>
</div>
私はおそらくjsで内容を複製したくありません。ありがとう – Giox
これを使用すると、2つのコンテナのデスクトップ用とモバイルのための1つを作成する場合、私は.desktop-viewと.mobile-viewのクラスを持つ2つのコンテナdivを作成し、css media queries
h1{
width:100%;text-align:center;
}
.red {
border:2px solid red;
}
.blue {
border:2px solid blue;
}
.yellow {
border:2px solid yellow;
}
.mobile-view {
display: none;
}
@media screen and (max-width: 768px) {
.mobile-view {
display: block;
}
.desktop-view {
display: none;
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<div class="container desktop-view">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6 red"><h1>1</h1></div>
<div class="col-md-6 red"><h1>1</h1></div>
<!--if I put the blue boxes here, then I'm not able to have Red2 just below Red1 in mobile layout-->
<div class="col-md-12 blue"><br><br><br><br><br><br><br><h1>3</h1><br><br><br><br><br><br><br></div>
<div class="col-md-4 blue"><h1>4</h1></div>
<div class="col-md-8 blue"><h1>4</h1></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12 red">
<br><br><br><br><br><h1>2</h1><br><br><br><br><br>
</div>
<div class="col-md-6 yellow"><h1>5</h1></div>
<div class="col-md-6 yellow"><h1>5</h1></div>
<div class="col-md-12 yellow">
<br><br><h1>6</h1><br><br>
</div>
</div>
</div></div>
<div class="row">
<div class="col-md-12 yellow">
<br><br><h1>7</h1><br><br>
</div>
</div>
</div>
<div class="container mobile-view">
<div class="row">
<div class=" col-md-6 col-sm-6 red"><h1>1</h1></div>
<div class=" col-md-6 col-sm-6 red"><h1>1</h1></div>
<div class="col-md-12 red"><br><br><br><br><h1>2</h1><br><br><br><br></div>
<!--if I put the blue boxes here, then I'm not able to have Red2 just below Red1 in mobile layout-->
<div class="col-md-12 blue"><br><br><br><br><h1>3</h1><br><br><br><br></div>
<div class="col-md-4 col-sm-4 col-xs-4 blue"><h1>4</h1></div>
<div class="col-md-8 col-sm-8 col-xs-8 blue"><h1>4</h1></div>
<div class="col-md-6 yellow"><h1>5</h1></div>
<div class="col-md-6 yellow"><h1>5</h1></div>
<div class="col-md-12 col-sm-12 yellow"><h1>6</h1></div>
<div class="col-md-12 yellow">
<br><br><h1>7</h1><br><br>
</div>
</div>
</div>
</body>
</html>
これは現在のhtml構造では実行できません。 '1,1,2'がモバイル上で次々になるためには、同じ行にある必要があります。例えば、同じ行の' 1,1'、次の行の最初の '2'などです。あなたの例では「3,4,4」は「2」の前にあり、異なる行にあります。あなたはあなたの '箱'に石工の効果が必要なようですので、あなたはjavascript関連の解決策を調べることをお勧めします –