行/列排序/编辑。如何仅删除某个断点的 div？答案

【问题标题】：Row/Column ordering/editing. How can I delete divs only for a certain breakpoint?行/列排序/编辑。如何仅删除某个断点的 div？
【发布时间】：2020-05-23 18:27:01
【问题描述】：

正如您在附图中看到的那样，在桌面版本中，我有 8 个 2 行和 4 列的 div，但在移动版本中，我只需要将这些 div 中的 6 个（不显示其中 2 个）组织成 3 行和 2 列。请看一下图片，以便您了解我需要的顺序。

关于如何实现这一点的任何想法？

谢谢:)

【问题讨论】：

很抱歉，如果您不知道从哪里开始，您可能会不知所措。 CSS 旨在操纵页面的布局/设计，而不是操纵内容。您需要使用 JS (JavaScript)，或者让您的后端脚本知道它们是否将内容提供给移动设备。如果今天对您来说这不是显而易见的事情，那么在实施一个好的解决方案之前，您需要学习很多东西。
@thelr 您可以使用媒体查询和flex 或grid 和纯css（不需要js）轻松实现它。 OP 应该创建一个他尝试过的minimal reproducible example
@thelr 内容也是页面布局/设计的一部分。我找到了一种方法，使用 flex 和 display: none; 用于我想隐藏在移动设备中的 div。

标签： html css twitter-bootstrap flexbox

【解决方案1】：

我正在回答我的问题，因为我找到了一种方法来做我想做的事。就是这样：

.container {
  display: flex;
  flex-flow: wrap;
  width: 100%;
}
.item {
  width: 25%;
  text-align: center;
}
@media screen and (max-width: 700px) {
  .item {
    width: 50%;
  }
  .item-invisible {
    display: none;
  }
}
.item-content {
  background-color: #999;
  margin: 5px;
}

<div class="container">
  <div class="item">
    <div class="item-content">1</div>
  </div>
  <div class="item">
    <div class="item-content">2</div>
  </div>
  <div class="item">
    <div class="item-content">3</div>
  </div>
  <div class="item item-invisible">
    <div class="item-content">4</div>
  </div>
  <div class="item">
    <div class="item-content">5</div>
  </div>
  <div class="item">
    <div class="item-content">6</div>
  </div>
  <div class="item">
    <div class="item-content">7</div>
  </div>
  <div class="item item-invisible">
    <div class="item-content">8</div>
  </div>
</div>

还是谢谢:)

【讨论】：