Bootstrap 3: Push/pull столбцы только на меньших размерах экрана

у меня есть следующий макет на странице:

<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>
2 55
html css twitter-bootstrap twitter-bootstrap-3

2 ответа:

ответил на него сам, просто подумав: мобильный первый!

<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>

получить их в том порядке, который я хочу на планшете, а затем нажмите/потяните их в положение на рабочем столе.

141

У меня было немного другое требование (все еще в аналогичных строках)

ниже получает меня там:

<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>
4