-1

I need to reorder div in my mobile version, but I cannot use display:table in my parent div cause it breaks my responsive layout. I need to switch between additional 1 and 2.

<div class="product-view">
 <form action> </form>
 <div class="box-additional1"></div>
 <div class="box-additional2"></div>
</div>

Cannot use the solution described here: CSS layout, use CSS to reorder DIVs Should I use javascript instead?

thanks

Community
  • 1
  • 1
Sam Provides
  • 269
  • 2
  • 6
  • 17
  • Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. – Paulie_D Mar 31 '16 at 14:21

2 Answers2

3

You can achieve this by setting display: flex; on the parent element and using order to reorder its children. See the example (and full screen example) below.

What it does:

The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. Elements with the same order value are laid out in the order in which they appear in the source code.

Read more about the order property at Mozilla Developer Network.

body, html {
  margin: 0;
  padding: 0;
}

.product-view {
  display: flex;
  flex-flow: row wrap;
}

.box-additional1, .box-additional2 {
  width: 100%;
  height: 100px;
  flex-basis: 100%;
}

.box-additional1 {
  background: red;
}

.box-additional2 {
  background: darkRed;
}

@media screen and (min-width: 640px) {
  
  .box-additional1 {
    order: 2;
  }
  
  .box-additional2 {
    order: 1;
  }
}
<div class="product-view">
 <form action> </form>
 <div class="box-additional1"></div>
 <div class="box-additional2"></div>
</div>
Roy
  • 7,811
  • 4
  • 24
  • 47
  • nice, thanks. This one seems to be working. Think my problem was that my mobile version has some width 100% and that display:table-footer-group was not working – Sam Provides Mar 31 '16 at 14:46
  • @GiacomoRiccitiello If this solved your problem, please consider it marked as solved, so other people know that this solution can fix it. – Roy Apr 01 '16 at 07:40
1

Do you want to do it on an action event? If you need to do it on an action event, I recommend using JQuery. Just use a combination of detach and append:

var product = $('.product-view');
var first = product.children().eq(1).detach();
var second = product.children().eq(0).detach();
product.append(second);
product.append(first);

See the fiddle: https://jsfiddle.net/2vaxg8rp/

A.Sharma
  • 2,771
  • 1
  • 11
  • 24