在移动设备上更改列布局答案

【问题标题】：Change column layout on mobile在移动设备上更改列布局
【发布时间】：2020-06-04 13:10:22
【问题描述】：

我有一个导航菜单，它由 3 列组成，每列 33% 宽。在移动设备上，我希望每列都是 100% 宽并重新排列列，以便中间列位于所有其他列之上。

通过查看以下示例，可以更轻松地了解我想要实现的目标。你知道当屏幕宽度小于 500 像素时，我如何重新排列中间列，使其位于所有其他列之上？如果有一个很棒的 css 解决方案，我相信我可以很容易地在 Javascript 中实现这一点，如果可能的话，我只是更喜欢 CSS2/CSS3 的想法。

.col-1 {
  background-color: #eee;
  text-align: center;
}
.col-2 {
  background-color: #ccc;
  text-align: center;
}
.col-3 {
  background-color: #aaa;
  text-align: center;
}
.title {
  text-align: center;
  margin-top: 75px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.3/pure-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css">

<p class="title">Desktop Look</p>
<div id="menu" class="pure-g">
  <div class="col-1 pure-u-1-3">
    <div class="pure-menu pure-menu-horizontal custom-can-transform">
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
        </ul>
    </div>
  </div>
  <div class="col-2 pure-u-1-3">
    <div class="pure-menu">
        <a href="#" class="pure-menu-heading custom-brand">Brand</a>
    </div>
  </div>
  <div class="col-3 pure-u-1-3">
    <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
        </ul>
    </div>
  </div>
</div>


<p class="title"><i>Desired </i>Mobile Look</p>
<div id="menu" class="pure-g">
  <div class="col-2 pure-u-1">
    <div class="pure-menu">
        <a href="#" class="pure-menu-heading custom-brand">Brand</a>
    </div>
  </div>
  <div class="col-1 pure-u-1">
    <div class="pure-menu pure-menu-horizontal custom-can-transform">
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
        </ul>
    </div>
  </div>
  <div class="col-3 pure-u-1">
    <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
        </ul>
    </div>
  </div>
</div>

【问题讨论】：

标签： javascript html css pure-css

【解决方案1】：

您可以根据设备大小在弹性项目上使用order 属性。

这里我在.col-2 上使用了order: -1;。

Browser compatibility

.col-1 {
  background-color: #eee;
  text-align: center;
}

.col-2 {
  background-color: #ccc;
  text-align: center;
  order: -1;
}

.col-3 {
  background-color: #aaa;
  text-align: center;
}

.title {
  text-align: center;
  margin-top: 75px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.3/pure-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css">

<p class="title">Desktop Look</p>
<div id="menu" class="pure-g">
  <div class="col-1 pure-u-1-3">
    <div class="pure-menu pure-menu-horizontal custom-can-transform">
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
        </ul>
    </div>
  </div>
  <div class="col-2 pure-u-1-3">
    <div class="pure-menu">
        <a href="#" class="pure-menu-heading custom-brand">Brand</a>
    </div>
  </div>
  <div class="col-3 pure-u-1-3">
    <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
        </ul>
    </div>
  </div>
</div>

【讨论】：

谢谢，你知道flex和order是CSS2还是CSS3吗？
据我所知它们属于 CSS 3

【解决方案2】：

这可以使用order 来完成我创建了一个单独的类并向其添加了 css 代码，因为在默认的 purecss 代码上编写 css 不是一个好习惯。

.col-1 {
  background-color: #eee;
  text-align: center;
}

.col-2 {
  background-color: #ccc;
  text-align: center;
}

.col-3 {
  background-color: #aaa;
  text-align: center;
}

.title {
  text-align: center;
  margin-top: 75px;
}

@media(max-width: 768px) {
  .top_menu {
    display: flex;
   
  }
  .top_menu-middle {
    order: 0;
  }
  .top_menu-left {
    order: 1;
  }
  .top_menu-right {
    order: 2;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.3/pure-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css">

<p class="title">Desktop Look</p>
<div id="menu" class="pure-g top_menu">
  <div class="col-1 pure-u-1 pure-u-md-1-3 top_menu-left">
    <div class="pure-menu pure-menu-horizontal custom-can-transform">
      <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
      </ul>
    </div>
  </div>
  <div class="col-2 pure-u-1 pure-u-md-1-3 top_menu-middle">
    <div class="pure-menu">
      <a href="#" class="pure-menu-heading custom-brand">Brand</a>
    </div>
  </div>
  <div class="col-3 pure-u-1 pure-u-md-1-3 top_menu-right">
    <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
      <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
      </ul>
    </div>
  </div>
</div>


<p class="title"><i>Desired </i>Mobile Look</p>
<div id="menu" class="pure-g">
  <div class="col-2 pure-u-1">
    <div class="pure-menu">
      <a href="#" class="pure-menu-heading custom-brand">Brand</a>
    </div>
  </div>
  <div class="col-1 pure-u-1">
    <div class="pure-menu pure-menu-horizontal custom-can-transform">
      <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
      </ul>
    </div>
  </div>
  <div class="col-3 pure-u-1">
    <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
      <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
      </ul>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

在移动设备上，我希望每列都是 100% 宽

您只需要从以下位置更新 css：

<div class="pure-g">
    <div class="col-1 pure-u-1-3"> ... </div>
    <div class="col-2 pure-u-1-3"> ... </div>
    <div class="col-3 pure-u-1-3"> ... </div>
</div>

收件人：

<div class="pure-g">
    <div class="col-1 pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="col-2 pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="col-3 pure-u-1 pure-u-md-1-3"> ... </div>
</div>

现在，此网格中的元素在小屏幕上将是 width: 100%，但在中型及以上屏幕上会缩小为 width: 33.33%。

并重新排列列，使中间列位于所有其他列之上。

您可以在.col-2 列上使用order，例如：

@media screen and (max-width: 767px) {
  .col-2 {
    order: -1;
  }
}

工作演示：

.col-1 {
  background-color: #eee;
  text-align: center;
}
.col-2 {
  background-color: #ccc;
  text-align: center;  
}
@media screen and (max-width: 767px) {
  .col-2 {
    order: -1;
  }
}

.col-3 {
  background-color: #aaa;
  text-align: center;
}
.title {
  text-align: center;
  margin-top: 75px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.3/pure-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css">

<p class="title">Desktop Look</p>
<div id="menu" class="pure-g">
  <div class="col-1 pure-u-1 pure-u-md-1-3">
    <div class="pure-menu pure-menu-horizontal custom-can-transform">
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
        </ul>
    </div>
  </div>
  <div class="col-2 pure-u-1 pure-u-md-1-3">
    <div class="pure-menu">
        <a href="#" class="pure-menu-heading custom-brand">Brand</a>
    </div>
  </div>
  <div class="col-3 pure-u-1 pure-u-md-1-3">
    <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
        </ul>
    </div>
  </div>
</div>


<p class="title"><i>Desired </i>Mobile Look</p>
<div id="menu" class="pure-g">
  <div class="col-2 pure-u-1">
    <div class="pure-menu">
        <a href="#" class="pure-menu-heading custom-brand">Brand</a>
    </div>
  </div>
  <div class="col-1 pure-u-1">
    <div class="pure-menu pure-menu-horizontal custom-can-transform">
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
        </ul>
    </div>
  </div>
  <div class="col-3 pure-u-1">
    <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
        </ul>
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

您可以使用媒体查询来设置弹性项目的宽度和顺序。

.col-1 {
  background-color: #eee;
  text-align: center;
}
.col-2 {
  background-color: #ccc;
  text-align: center;
}
.col-3 {
  background-color: #aaa;
  text-align: center;
}
.title {
  text-align: center;
  margin-top: 75px;
}

@media only screen and (max-width: 500px) {
  /* Using specificity to force 100% width */
  .col-1.pure-u-1-3, .col-2.pure-u-1-3, .col-3.pure-u-1-3 {
    width: 100%;
  }
  .col-1 {
    order: 2;
  }
  .col-2 {
    order: 1;
  }
  .col-3 {
    order: 3;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.3/pure-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css">

<p class="title">Desktop Look</p>
<div id="menu" class="pure-g">
  <div class="col-1 pure-u-1-3">
    <div class="pure-menu pure-menu-horizontal custom-can-transform">
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
        </ul>
    </div>
  </div>
  <div class="col-2 pure-u-1-3">
    <div class="pure-menu">
        <a href="#" class="pure-menu-heading custom-brand">Brand</a>
    </div>
  </div>
  <div class="col-3 pure-u-1-3">
    <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Link</a></li>
        </ul>
    </div>
  </div>
</div>

【讨论】：