jQuery toggleClass example

Toggle class name on click in jQuery

by ti2005

HTML

<!-- <div id="w1">
    <div id="i1">1</div>
    <div id="i2">2</div>
    <div id="i3">3</div>
</div> -->

<div id="w2">
    <div id="i4">4</div>
    <div id="i5">5</div>
</div>

CSS

/* Global stuff */
html,
body {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* Solution */
#w1 {
  display: flex;
  flex-flow: column wrap;
  /* vertical arrangement */
  align-items: flex-end;
  /* forces 2&3 to lower right */
  width: 100%;
  height: 100%;
}

/* full screen */

#i1 {
  width: 100%;
  height: 50%
}

/* full width, half height of #w1 */
#i2,
#i3 {
  width: 50%;
  height: 25%
}

/* half width, half height of #w1 */

#w2 {
  display: flex;
  flex-direction: column;
  /* stay unchanged */
  position: absolute;
  top: 50%;
  /* nasty, but works */
  width: 50%;
  height: 50%
}

/* stay unchanged */

#i4,
#i5 {
  width: 100%;
  height: 50%;
}

/* stay unchanged */

#i1::before {
  content: 'mobile';
}

@media all and (min-width: 720px) {

  #i1::before {
    content: 'desktop';
  }

  /* become equal in size */
  #i1,
  #i2,
  #i3 {
    width: 50%;
    height: 50%;
  }

  /* half width, half height of #w1 */

  #w1 {
    flex-flow: row wrap;
    /* horizontal arrangement */
    justify-content: flex-start;
  }

  /* forces 1&2&3 to upper left */
  #w2 {
    right: 0;
  }

  /* reposition, nasty, but works */
}

/* Demo */
#w1 *,
#w2 * {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  background: #f0f0f0;
  border: 2px solid black;
}