greasemonkey Posted May 5, 2018 Share Posted May 5, 2018 Hey all, I'm looking for a tip - I had built product info content modules (previous to their inclusion in EDGE) and everything has been great. However, I'm looking for to optimize a little further and I'm stuck. Currently I have 3 modules with the following sort order: [description-500] [price-501] [image-502] And would like to re-order these based on the SM viewport to: [price-501] [description-500] [image-502] I was initially thinking I would be able to use the bootstrap columns to re-order (push and pull), however the module sort order would seem to override this? Any clue - maybe a header tag script? Or will I have to break into admin/modules.php? Link to comment Share on other sites More sharing options...
Antonio Garcia Posted May 6, 2018 Share Posted May 6, 2018 Unfortunately offsetting columns are not controlled from 'configuration' (neiter every posible value in all "Extra small devices Phones", "Small devices Tablets", "Medium devices Desktops", "Large devices Desktops" or set if you can disable this in one or more views). For cover this you will need to add 'by hand" some classes into the html part of the module. May be this link can help you: https://getbootstrap.com/docs/3.3/css/#grid-offsetting Link to comment Share on other sites More sharing options...
greasemonkey Posted May 7, 2018 Author Share Posted May 7, 2018 On 5/6/2018 at 5:48 AM, Antonio Garcia said: Unfortunately offsetting columns are not controlled from 'configuration' (neiter every posible value in all "Extra small devices Phones", "Small devices Tablets", "Medium devices Desktops", "Large devices Desktops" or set if you can disable this in one or more views). For cover this you will need to add 'by hand" some classes into the html part of the module. May be this link can help you: https://getbootstrap.com/docs/3.3/css/#grid-offsetting Thank you Antonio. The description on column ordering is ridiculously undocumented on the bootstrap site. The total documentation is: ****Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.*** I have figured it out however - the issue has nothing to do with the sort order config built in OsC - although the sort order config allows you to give a starting point. The missing part bootstrap should "re"-emphasize is: you cannot re-order columns on smaller screen - you MUST re-order for larger screens (yes I know... bootstrap is "mobile first"... and therefore should have realized my error... a quick google search however I quickly realized I'm, by far, not the only person who missed this critical part). So, use the config sort order to order your columns on smaller screens - THEN use the push/pull features to re-order your columns for larger screens. So - on xs screens: [500] with col-sm-4 col-sm-push-8 [501] with col-sm-8 col-sm-pull-4 BUT on screens sm and larger would become [501] with col-sm-8 col-sm-pull-4 [500] with col-sm-4 col-sm-push-8 Exactly what I'm looking for! Link to comment Share on other sites More sharing options...
Antonio Garcia Posted May 7, 2018 Share Posted May 7, 2018 1 hour ago, greasemonkey said: Exactly what I'm looking for! great! Link to comment Share on other sites More sharing options...
greasemonkey Posted May 7, 2018 Author Share Posted May 7, 2018 As a secondary solution - which actually works a little better (if you are using any column wrap built into bootstrap) is to re-order via javascript. So, I extended the main div class for the descriptions and price templates... and then add to the price template: <div class="col-sm-<?php echo $content_width; ?> description"> <div class="col-sm-<?php echo $content_width; ?> price"> <script> var wasMobile = true; $(document).ready(function moveColumn() { if ($(window).innerWidth() < 767 && wasMobile) { $('.description').detach().insertAfter('.price'); wasMobile = true; } }) $(window).on('resize', moveColumn); moveColumn(); </script> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.