CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jomskris
jomskris

Reputation: 305

Display ul list above div on mobile

I'm trying to display ul list above div but only on mobile. What is the best way to do that? Here is a simple code:

<div>
    <div>
      <p>
        This is a content!       
      </p>
    </div>
  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
  </ul>

Ideal scenario on mobile would be like this:

<div>

  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
  </ul>

    <div>
      <p>
        This is a content!       
      </p>
    </div>


</div>

Upvotes: 0

Views: 152

Answers (1)

Gerard
Gerard

Reputation: 15786

You can use a flexbox and use the order property inside a media query to flip the flex items.

.wrapper {
  display: flex;
  flex-direction: column;
}

@media only screen and (max-width: 600px) {
  .wrapper>div {
    order: 2;
  }
  .wrapper>ul {
    order: 1;
  }
}
<div class="wrapper">
  <div>
    <p>
      This is a content!
    </p>
  </div>
  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
  </ul>
</div>

Upvotes: 1

Related Questions