Search the Community

Hi everybody! I hope somebody could help me understand a complex dynamic page structure and to debug my problem, which is as follows: change order of two divs in mobile view When in mobile phone view (screen width < 768 px., showing the content of the page in just one screen-wide column) I want to show two columns of a wordpress page in another order than the one they appear when in desktop view. The left column should appear, in mobile view, under the right column, instead of appearing over (before) the right column. For this, I found the following generic solution (1) : <div id="wrapper"> <div id="firstDiv"> Content to be below in this situation </div> <div id="secondDiv"> Content to be above in this situation </div> </div> @media only screen and (max-width: 767px) { #wrapper { display: table; width: 100%; } #firstDiv { display: table-footer-group; } #secondDiv { display: table-header-group; } } And I am trying to implement it in the page that you can see here: http://www.luxuryexoticproperties.com/test/beoliere-estate/ My problem is that the page, generated dynamically by wordpress, is quite complex in its structure, and contains not only two divs for those two columns, but several divs, "nested" in each other, for each of the two columns, And I simply do not know which css name I should use for my generic example I wrote here above. The generated HTML-code of the two columns in the page is as follows (2) : <div class="post_content"> <div class="vc_row wpb_row vc_row-fluid vc_custom_1481449109473"> <!- here starts the left column of the WP-page, in my opinion -> <div class="wpb_column vc_column_container vc_col-sm-5"> <div class="vc_column-inner vc_custom_1481449100657"> <div class="wpb_wrapper"><div class=""> <p>The building comprises three blocks of flats...(text content)</p> </div> <div class=" " style="margin-top:0px;padding-bottom:20px;"> </div> <div class=""> </div> <div> <!- ... further text etc. -> </div> </div> </div> </div> <!- here starts the right column of the WP-page -> <div class="wpb_column vc_column_container vc_col-sm-7"> <!- images and gmap, etc. - I don't copy their code here, it's too long -> </div> </div> For the html-code above (2), I tried to adapt the CSS code as follows, to produce the effect I wished: "first div" I presumed that the left column is defined by <div class="wpb_column vc_column_container vc_col-sm-5"> "second div" and that the right column is defined by <div class="wpb_column vc_column_container vc_col-sm-7"> "wrapper" and took the <div class="post_content"> as the container of the two columns, as the "wrapper" (table). So the generic CSS solution from above (1), would be transformed into: @media only screen and (max-width: 767px) { .post_content { display: table; width: 100%; } .wpb_column.vc_column_container.vc_col-sm-5 {display: table-footer-group; } .wpb_column.vc_column_container.vc_col-sm-7 { display: table-header-group; } } but using this CSS does not work (it produces not the wished effect, just brings the html-page to a wrong format). I hope my question is not too complicated... And thank you all in advance! Horia