CODEWITHSUNDEEP
javascripthtmlcss
Lefka
Lefka

Reputation: 673

How to change order of elements based on browser size?

I have three buttons that are stacked horizontally. Each button, when clicked, shows a div element. When the browser is resized to a mobile view, I want the elements to stack vertically. This occurs by default, but I would like to stack the div element directly underneath the button it is associated with.

This is what I want to display (desktop left, mobile right):

Correct desktop view enter image description here

This is what I get (desktop left, mobile right):

Correct desktop view Incorrect mobile view

Here's the basic HTML. If I move the associated divs directly underneath the buttons, it looks fine on mobile but incorrect on desktop.

<button onclick="updateValue(1)">Button 1</button>
<button onclick="updateValue(2)">Button 2</button>
<button onclick="updateValue(3)">Button 3</button>
<div id="div-1"><span>This is div 1!</span></div>
<div id="div-2"><span>This is div 2!</span></div>
<div id="div-3"><span>This is div 3!</span></div>

I did try to use floats on the buttons but I couldn't get the desired output. Here is a fiddle showing what I have right now.

JSFIDDLE

So how do I order the elements button + button + button > div on desktop, and button > div > button > button on mobile?

Upvotes: 0

Views: 635

Answers (5)

Jan Franta
Jan Franta

Reputation: 1721

@Lefka here is an example using flexbox model.
When you resize the example in full page view to window less than 420px the elements will be reordered the way you expected.
Hope it help you to figure out your needs.

function updateValue(newValue) {
  for (i = 1; i <= 3; i++) { 
    var element = document.getElementById("div-" + i);
    element.className = "";
    if (newValue === i) {
      element.className = "show";
    }
  }
}
div {
  display: none;
}

.show {
  display: block;
}

.flex-parent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
}

button {
  flex: 0 0 auto;
}

[id^="div-"] {
  flex: 1 1 100%;
}

@media screen and (max-width: 420px) {
  .flex-parent {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
  }
  
  .button-1 {
    order: 0;
  }
  
  .button-2 {
    order: 2;
  }
  
  .button-3 {
    order: 4;
  }
  
  #div-1 {
    order: 1;
  }
  
  #div-2 {
    order: 3;
  }
  
  #div-3 {
    order: 5;
  }
} 
<div class="flex-parent">
  <button class="button-1" onclick="updateValue(1)">Button 1</button>
  <button class="button-2" onclick="updateValue(2)">Button 2</button>
  <button class="button-3" onclick="updateValue(3)">Button 3</button>
  <div id="div-1"><span>This is div 1!</span></div>
  <div id="div-2"><span>This is div 2!</span></div>
  <div id="div-3"><span>This is div 3!</span></div>
</div>

Upvotes: 1

Jose Bernalte
Jose Bernalte

Reputation: 177

function updateValue(div)
{
  $('DIV > DIV').hide();
  $('#div-'+ div).show()
}
.parent{position:relative}

DIV > DIV{display:none; position:absolute}


@media (max-width: 480px) {
  DIV > DIV{display:none; position:relative}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">
<button onclick="updateValue(1)">Button 1</button>
<div id="div-1"><span>This is div 1!</span></div>
<button onclick="updateValue(2)">Button 2</button>
<div id="div-2"><span>This is div 2!</span></div>
<button onclick="updateValue(3)">Button 3</button>
<div id="div-3"><span>This is div 3!</span></div>
</div>

Upvotes: 0

Feathercrown
Feathercrown

Reputation: 2591

Put Button1 and Div1 into a container div together with width=button's width and overflow set to visible. Repeat for other buttons if necessary. Widen divs if needed.

<div id=superContainer>
    <div id=subContainer1>
        <button onclick="updateValue(1)">Button 1</button>
        <div id="div-1"><span>This is div 1!</span></div>
    </div>
    <div id=subContainer2>
        <button onclick="updateValue(2)">Button 2</button>
        <div id="div-2"><span>This is div 2!</span></div>
    </div>
    <div id=subContainer3>
        <button onclick="updateValue(3)">Button 3</button>
        <div id="div-3"><span>This is div 3!</span></div>
    </div>
</div>

Upvotes: 0

Shane Cavaliere
Shane Cavaliere

Reputation: 2223

First, move each div under its respective button.

<button onclick="updateValue(1)">Button 1</button>
<div id="div-1"><span>This is div 1!</span></div>
<button onclick="updateValue(2)">Button 2</button>
<div id="div-2"><span>This is div 2!</span></div>
<button onclick="updateValue(3)">Button 3</button>
<div id="div-3"><span>This is div 3!</span></div>

Then using CSS media queries, you can position the div absolutely below the row of buttons at desktop sizes, and then leave it positioned normally at mobile sizes.

button {
  display: block;
}
div {
  display: none;
}
.show {
  display: block;
}

@media (min-width: 768px) {
  button {
    display: inline;
  }
  .show {
    position: absolute;
    top: 30px;
  }
}

Here's a fiddle with a working example.

Upvotes: 1

Jose Bernalte
Jose Bernalte

Reputation: 177

And you can add a new DIV?

<div>
<button onclick="updateValue(1)">Button 1</button>
<button onclick="updateValue(2)">Button 2</button>
<button onclick="updateValue(3)">Button 3</button>
</div>
<div id="div-1"><span>This is div 1!</span></div>
<div id="div-2"><span>This is div 2!</span></div>
<div id="div-3"><span>This is div 3!</span></div>

Upvotes: 0

Related Questions