Bootstrap 3:仅在较小的屏幕上推/拉列
我在页面上有以下布局:
<div class="col-lg-3">1</div> <div class="col-lg-2">2</div> <div class="col-lg-2">3</div> <div class="col-lg-2">4</div> <div class="col-lg-3">5</div> --------- ----- ----- ----- --------- | 1 | 2 | 3 | 4 | 5 | --------- ----- ----- ----- ---------
但在较小的屏幕尺寸,我想要以下布局:
<div class="col-xs-6">1</div> <div class="col-xs-6">5</div> <div class="col-xs-4">2</div> <div class="col-xs-4">3</div> <div class="col-xs-4">4</div> ----------------- ----------------- | 1 | 5 | ----------------- ----------------- | 2 | 3 | 4 | ----------- ----------- -----------
(请注意重新排列列顺序。)是否可以仅在较小的屏幕尺寸上推/拉列? 我尝试了以下,但我得到最古怪的布局,似乎完全失去<div>5</div>
…:
<div class="col-lg-3 col-xs-6">1</div> <div class="col-lg-2 col-xs-4 col-xs-push-4">2</div> <div class="col-lg-2 col-xs-4>3</div> <div class="col-lg-2 col-xs-4>4</div> <div class="col-lg-3 col-xs-6 col-xs-pull-12">5</div>
回答它自己,只是通过思考:移动的第一!
<div class="col-lg-3 col-xs-6">1</div> <div class="col-lg-3 col-xs-6 col-lg-push-6">5</div> <div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div> <div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div> <div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div>
先按照我想在平板电脑上订购的顺序,然后将其推入/拉入桌面。
我有一个稍微不同的要求(仍然在类似的路线)
下面让我在那里:
<div class="row"> <div class="col-lg-1 col-xs-2">TIME</div> <div class="col-lg-5 col-xs-6">EVENT</div> <div class="col-lg-2 col-xs-4">STATUS</div> <div class="col-xs-2 visible-xs"></div> @*offset for xs*@ <div class="col-lg-2 col-xs-6">START LIST</div> <div class="col-lg-2 col-xs-4">RESULTS</div> </div>