ウィンドウ/スクリーンサイズに基づいていくつかのコンテンツを並べ替える必要があります。ウィンドウサイズに基づいてコンテンツを並べ替える
これは時にフルで、それがどのように見えるかです:
そして、これは画面サイズ768以下のとき、私は必要なものである:
は、これは私のコードの構造です:
<div class="container">
<div class="row">
<div class="col-md-9 site-main-content">
<div class="content">
<!--Main content-->
</div>
</div>
<div class="col-md-3 site-sidebar-content">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
</div>
</div>
これを実現する方法がわかりません。
更新:私は隠されたプロパティを使用できません。ボックス1にはいくつかのAjax検索フォームが含まれています。メインコンテンツ(フルスクリーン上)の上に置き、ディスプレイnoneを設定すると、ajaxフォームはもう動作しません。だから私はそれが場所からボックス1を削除し、小さな画面上のメインコンテンツの上にロードするjavascriptスニペットを探しています。私がチェックし、私に知らせてください私の例では隠されたクラスを使用していた
のみフレックス牛はdivの順序を並べ替えることができますが、2つの折り返し括弧内にあるわけではありません。 (少なくとも現時点で)。再構成やJavaScriptの使用が必要な場合があります。 –
詳細については、ブートストラップのhidden- *クラスを使用してみてください。以下の答えを確認してください... –
@SunilGehlotは隠しクラスを使用できません。私の更新を確認してください。 –