CODEWITHSUNDEEP
htmlcss
InfinityStream
InfinityStream

Reputation: 45

Rearrange columns with CSS when utilizing mobile first

How would I go about if I'm aiming to use pure HTML and CSS to achieve the results as shown in the below image?

Rearranged css columns

I need to rearrange the stacked elements for larger screens, I've tried with:

#2: float: left
#1: display: inline-block
#3: float: right

but that didn't do the trick. Anyone can point me in the right direction?

Upvotes: 1

Views: 93

Answers (1)

Aydin4ik
Aydin4ik

Reputation: 1935

For the easiest and neatest result, and also, to make use of the latest technology and trend - use flexbox. Specifically, follow implementation of the Holy Grail with flexbox. For example - expand the below snippet, run it and resize the window:

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}
.HolyGrail-content {
  background-color:orange;  
  order:1;
}

.HolyGrail-content, .HolyGrail-ads {
  /* 12em is the width of the columns */
  flex: 0 0 300px;
}

.HolyGrail-nav {
  /* put the nav on the left */
  flex:1;
  order: -1;
  background-color:green;  
}
.HolyGrail-ads {
  background-color:red;
  order:3;
}
.HolyGrail,
.HolyGrail-body {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .HolyGrail-body {
    flex-direction: row;
    flex: 1;
  }
  .HolyGrail-content {
    flex: 1;
  }
  .HolyGrail-content, .HolyGrail-ads {
    /* 12em is the width of the columns */
    flex: 0 0 300px;
  }
  .HolyGrail-nav {
    order:2;
  }
}
<body class="HolyGrail">
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">…</main>
    <nav class="HolyGrail-nav">…</nav>
    <aside class="HolyGrail-ads">…</aside>
  </div>
  <footer>…</footer>
</body>

Upvotes: 2

Related Questions