0

I'm really stuck with a layout problem on my website.

I have the web-screen view laid out the way I want, but need to shuffle the order of the block a little for mobile view. I've tried using the align classes, and the 'push' or 'pull' classes, but can't what I need.

Here is the laptop view I need:

Block 1 and Block 2 in a column on the left, Block3, Block4, Block5, Block6 and Block7 on the right.

This I can do no problem.

But then for the mobile view, I need it in this order from top to bottom (see images below):

Block 3 Block 1 Block 5 Block 4 Block 2 Block 5 Block 6

Can anyone please help?

AndrewL64
  • 15,794
  • 8
  • 47
  • 79
Billy
  • 1
  • Just realised that because I"m new in here, I can't post images... Hopefully my description makes sense... – Billy Sep 08 '15 at 19:33
  • 3
    Could you post a [fiddle](http://jsfiddle.net)? Just put the minimal code in it, something we can work with. – Ramiz Wachtler Sep 08 '15 at 19:41
  • 1
    Can you add a link to an image? – NightShadeQueen Sep 08 '15 at 19:50
  • Where did `Block 7` go in the mobile view? Or is that to be hidden? Yea. A demo fiddle would help alot. – Chris Yongchu Sep 08 '15 at 19:55
  • Just to check: what browser(s) are you testing with (based on personal experience that IE in compatibility mode and twitter-bootstrap tend to puke on each other when trying to use push/pull) – Foon Sep 08 '15 at 20:03
  • 1
    If what you are trying to do is not possible then you can always make 2 grids, one for mobiles and one for desktops, both of which will be appropriately hidden. – dosek125 Sep 08 '15 at 21:00
  • Have you looked at offsetting columns in the Bootstrap CSS docs? – rybo111 Sep 08 '15 at 21:12

1 Answers1

0

What you can do is use jQuery to achieve this.

You can have 2 <div> tags. One for the sidebar (<div id="sidebar">) One for the main content (<div id="main">) And one for the blocks (<div id="blocks") (Each block would also have its own ID e.g. b1 for block 1)

Then you can arrange the blocks appropriately depending on the device using this:

$(document).ready(function(){
    $("#b1").appendTo("#sidebar");
});

When it comes to detecting the device using Bootstraps breakpoints you can follow this tutorial: How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?

Community
  • 1
  • 1
dosek125
  • 118
  • 9
  • Here is a link to the page in question on my site. http://canvascut.com/sets/Axe Thanks all for your help! – Billy Sep 09 '15 at 07:44