Change column layout on mobile

Question

I have a nav menu that consists of 3 columns each 33% wide. On mobile I want each column to be 100% wide AND rearrange the columns so that the middle column sits above all other columns.

Its much easier to see what I am trying to achieve by viewing the below example. Do you know how I could rearrange the middle column so it sits above all other columns when the screen width is <500px? If there is a css solution that would be great, I believe I could achieve this in Javascript easily I'd just prefer CSS2/CSS3 ideas if its possible.

.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

This can be done using order I have created a separate class and added css code to it, since its not a good practice to write css on default purecss code.

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

You can use a media query to set the width and order of the flex items.

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

Answer 3

On mobile I want each column to be 100% wide

You simply need to update css from:

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

To:

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

Now, the elements within this grid will be width: 100% on small screens, but will shrink to become width: 33.33% on medium-sized screens and above.

---

AND rearrange the columns so that the middle column sits above all other columns.

For you can use order on .col-2 column like:

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

---

Working Demo:

.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

You can use order property on flex items depending on device size.

here I have used order: -1; on .col-2 .

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>