Question

我有3列数据，每列有2行。当屏幕宽度小于某个值时，我想将3x2表转换为1x6表。知道如何实现这个目标吗？

我的专栏有以下结构：

<div class="one-third animate_afl">
  <div class="w-iconbox custom_img iconpos_left size_big type_default color_primary">
    <div class="w-iconbox-link" >
      <div class="w-iconbox-icon">
        <i class="fa fa-"></i>
        <img src="wp-content/uploads/2015/04/9-over.png" alt="">    
      </div>
      <h4 class="w-iconbox-title">Title</h4>
    </div>
    <div class="w-iconbox-text">
      <p>Paragraph text.</p>
    </div>
  </div>
  <div class="g-hr type_invisible">
    <span class="g-hr-h">
      <i class="fa fa-star"></i>
    </span>
  </div>
  <div class="w-iconbox custom_img iconpos_left size_big type_default color_primary">
    <div class="w-iconbox-link">
      <div class="w-iconbox-icon">
        <i class="fa fa-"></i>
        <img src="wp-content/uploads/2015/04/modul1-over.png" alt="">   
      </div>
      <h4 class="w-iconbox-title">Title 2</h4>
    </div>
    <div class="w-iconbox-text">
      <p>Paragraph text 2.</p>
    </div>
  </div>
  <div class="w-iconbox custom_img iconpos_left size_big type_default color_primary">
    <div class="w-iconbox-text"></div>
  </div>
</div>

Answer 1

这肯定会涉及CSS媒体查询，它允许你做这件事。您甚至可以根据需要设置多个中断宽度，其中css可以根据需要更改每个宽度。

屏幕尺寸更改时转换表格

1 个答案: