Reverse Ordering

Duke Ovie — Tue, 18 Feb 2020 12:04:07 +0000

While working on a project, I needed to change the position of two divs based on screen size. This meant that when the website is viewed on desktop, the divs are stacked same way as designed but when viewed on mobile, the divs should be reversed. I already knew there was a css property using display: none but that would mean duplicating code. Several solutions found only discussed row/column reverse. After some experimentation, I realized I could just reverse the flex direction. The goal of this tutorial is to show both div reverse ordering and column reverse ordering based on screen width <500px. Let us begin.

The Goals

Div Reverse

Div Reverse Mobile

Column Reverse

Column Reverse Mobile

The Markup

Since I am using bootstrap, I added a few inline styles:

<div class="divReverse p-5 mt-5 mb-4">
  <div class="mb-5 mt-5 p-5 bg-primary">
    <h1 class="first">Desktop 1st DIV </h1>
  </div>
  <div class="mb-5 mt-5 p-5 bg-info">
    <h1>Desktop 2nd DIV </h1>
  </div>
</div>

Basic Styles

Used some CSS methods to reverse the div order

@media only screen and (max-width: 600px) {
  .divReverse {
    background: #A9A9A9;
    display: flex;
    flex-wrap: wrap-reverse;
  }
}

Conclusion

In this tutorial, we saw how we can easily reverse a div. For the complete code and that of column-reverse ordering, I have added a link to codepen https://codepen.io/dukeofwest/pen/JjdKbEV

Goals for 2020

Duke Ovie — Mon, 13 Jan 2020 15:36:44 +0000

I am not a big fan of New Year Resolutions. However, at the beginning of the year, I set some goals that I would like to accomplish before the end of the year. Call it a ~~resolution/target/~~goal or whatever but I decided these towards the end of 2019. In no particular order, my goals for 2020 are;

Attend at least 20 meetups
Publish 15 articles
Tweet more
Give a talk
Mentor Newbies
Attend a conference
Run a half marathon

So, there you have it. I hope that by the end of the year, I'd happily look back at this post and say I did it. Also, all milestones achieved will be shared in hopes that someone out there becomes inspired.