RWD replace pull push trick - lustan3216/BlogArticle GitHub Wiki

當RWD xs的時候上下順序可以顛倒 情境：

<div class='row'>
  <div class='col-sm-6'>AAA</div>
  <div class='col-sm-6'>BBB</div>
</div>

此時平板以上 會顯示 AAA在「左」 BBB在「右」

手機時 會顯示 AAA在「上」 BBB在「下」

如果想要

此時平板以上 會顯示 AAA在「左」 BBB在「右」

手機時 會顯示 AAA在「下」 BBB在「上」

則變成以下即可

<div class='row reorder-xs'>
  <div class='col-sm-6'>AAA</div>
  <div class='col-sm-6'>BBB</div>
</div>

以下是code內容

.row.reorder-xs 
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    direction: rtl;
    margin-bottom: 30px;

.row.reorder-xs > [class*="col-"] 
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    direction: ltr;
⚠️ **GitHub.com Fallback** ⚠️