html - 如何在移动设备和平板电脑上将一列中的内容拆分为相邻的一列

Question

我正在使用 bootstrap3，并且在使用移动设备和平板电脑时尝试将内容从一列移动到另一列。我必须将它放在另一列中，因为我专门将它放在相邻列的标题/图像下，其余部分放在底部以获得更好的移动体验。该页面已完全编码，我正在努力改善移动体验。

所附图片应解释我试图在视觉上实现的目标。 链接:Visual look

我目前的计划是复制内容并仅在手机和平​​板电脑 View 中显示，同时在手机和平​​板电脑上隐藏原始列。我只是想知道这是否会开始变得过于繁重，尤其是对于移动设备？ (据我了解，即使使用@media，所有内容仍会加载？)

我的做法是否正确？

图像中的 Col-1 和 Col-2 在技术上不是“col”，但它们存在于较大的屏幕上。这是我试图为移动设备修复的图片的两个右列的基本结构。

<div class="row">

  <div class=col-md-8>
   All of the content from col-3 as per image
  </div>

  <div class="col-md-4>
   All of the content from col-4 as per the image
  </div>

</div>

Answer 1

添加多个类以根据屏幕尺寸提供不同的行为。

grid section of Bootstrap 3 help 提供了更多详细信息，但在您的情况下:

<div class="row">

  <div class="col-md-8 col-sm-12">
   All of the content from col-3 as per image
  </div>

  <div class="col-md-4 col-sm-12">
   All of the content from col-4 as per the image
  </div>

</div>