Question

document.getElementByID("#divID").addEventListenet('click',()=>{
//write your logic
})

在较大的显示屏中我希望它以相同的顺序显示，但对于平板电脑，我想一起显示一个和三个，并且在它们下方显示两个。

Answer 1

我建议你使用css flexbox

.item {
  order: <integer>; /* default is 0 */
}

理解这个概念很好，请查看下面的链接。 csstricks

w3school flexbox

Answer 2

您可以使用引导网格并使用pull和push方法。以下是示例如何工作。首先按照平板电脑设备订购您的块，然后尝试安排大型设备的订单。

最初| A | B | C |然后我们要改变顺序| A | C |然后是| B |

  <div class="row">
       <div class="col-sm-4 col-xs-6">
           Content A
       </div>
       <div class="col-sm-4 col-xs-6 col-sm-push-4">
           Content C
       </div>
       <div class="col-sm-4 col-xs-12 col-sm-pull-4">
           Content B
       </div>
  </div>

如果您看到上面的代码，我正在推动Content C块向右推，然后Content B阻止拉向左侧。最初我按照我想要的屏幕订购了它，然后相应地移动了小块屏幕。

DEMO

阅读以下SO问题以获得更清晰的信息。

Bootstrap 3: Push/pull columns only on smaller screen sizes

Answer 3

通常在html中以时尚方式编写的元素以相同的顺序出现。因此，如果您想更改元素的顺序，您可以使用重复项并隐藏不需要的项。

    <div class="row">
      <div class="pimage clr">
        <img src="./images/portfolio/1.jpg" alt="Avatar" class="image" style="width:100%">
        <div class="middle">
          <div class="text">Onet</div>
        </div>
      </div>
      <div class="pvideo hide-sm">
        <img src="./images/portfolio/2.jpg" alt="Avatar" class="image" style="width:100%">
        <div class="middle">
          <div class="text">two</div>
        </div>
      </div>
      <div class="pimage">
        <img src="./images/portfolio/3.jpg" alt="Avatar" class="image" style="width:100%">
        <div class="middle">
          <div class="text">three</div>
        </div>
      </div>
     <div class="pvideo hidden show-sm">
        <img src="./images/portfolio/2.jpg" alt="Avatar" class="image" style="width:100%">
        <div class="middle">
          <div class="text">two</div>
        </div>
      </div>
    </div>

`

添加此样式以在屏幕尺寸更改时隐藏/显示

    <style>
        .hidden{
    visibility:hidden;
    }
//change the max-width accordingly

    @media(max-width:400px){
        .show-xs{
        visibility:visible;
        }
    .hide-sm{
        visibility:hidden;
        }
    }
    .hidden{
       visibility:hidden;
    }
    </style>

如何重新安排div

3 个答案: