在移动设备上更改列布局

Question

我有一个导航菜单，由 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>

Answer 1

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

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

浏览器兼容性

 .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>

Answer 2

这可以使用命令来完成，我创建了一个单独的 class 并向其中添加了 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>

Answer 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>

Answer 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>