html - Bootstrap 5个元素，在不同设备上的不同配置

Question

所以我有 5 个元素，我想将它们放在不同屏幕尺寸的不同位置。在台式机上，第一行是 3，第二行是 2

* * *
 * *

然后在平板电脑 2 - 2 - 1

* *
* *
*

然后在手机上每一个连续

*
*
*
*
*

我该怎么做平板电脑？如果我把前 3 个排成一行，我将得到以下内容

* *
*
* *

Answer 1

在 Bootstrap 中以移动优先开始总是有帮助的，因此您可以像这样实现您想要的:

.row div {
  text-align: center;
}

.col1 {
  background-color: red;
}
.col2 {
  background-color: blue;
}
.col3 {
  background-color: green;
}
.col4 {
  background-color: yellow;
}
.col5 {
  background-color: orange;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col1 col-xs-12 col-md-6 col-lg-4">COL1</div>
  <div class="col2 col-xs-12 col-md-6 col-lg-4">COL2</div>
  <div class="col3 col-xs-12 col-md-6 col-lg-4">COL3</div>
  <div class="col4 col-xs-12 col-md-6">COL4</div>
  <div class="col5 col-xs-12 col-lg-6">COL5</div>
</div>