I am currently, working on the below layout and I am finding it difficult to maintain alignment and layout.

Below is the layout I want, in blue border.

enter image description here

  • What do you mean by how? Are you referring to the technical methods for doing so, or are you asking how the layout should adjust at different breakpoints?
    – JonW
    Commented Dec 21, 2012 at 14:35
  • @JonW Thank you for your attention, however, I want how the layout should adjust at different breakpoints? Commented Dec 21, 2012 at 14:38
  • What are the main problems you have? The order of the boxes as the screen is at different sizes? What have you tried so far?
    – kontur
    Commented Dec 21, 2012 at 14:47

1 Answer 1


This is going to depend on what content is within each of those areas, and how big a priority you want to give those items. However a rule I use with Responsive Design is based on screen widths.

Therefore the first step is to determine which content elements take up the whole screen width. In your example there are two elements taking up the whole width (squares 1,2,3 are in one element, and 4,5,6 in the other). I have highlighted these below:

enter image description here

I would assume that these are all done using div elements. You have a global div containing everything, and then within that are other divs spanning 100% of the width of the screen.

You can also divide those divs up into additional elements. So in this example there is one full-screen one, and that is divided into two halfs (the top item, covering items 1,2 and 3) and the bottom container (items 4,5,6).

Because the top container is 100% of the screen width that is your first block, so you deal with the items within that first. That would mean you should stack items 1,2,3 ontop of eachother when you reach the smallest screensize.

The second div (4,5,6) you deal with next, and then stack those ontop of eachother accordingly.

So you end up with something like this:


download bmml source – Wireframes created with Balsamiq Mockups

Now, depending on where your breakpoints are, you can deal with middle-ground items differently.

Items 2 and 3 are the same width so could fit on the same width together.

You also have the option of adjusting the width of items too, so just because items 4,5,6 are the same width on desktop that doesn't mean they need to be the same on tablet. That could give you the layout of:


download bmml source

You need to make sure you're working with the items that take up the full width of the scren, and then determine what to do with the items within that area first, then decide how to deal with the contents of those items.

  • Thank you John. I am convinced with the idea, I am going to try and make it the most of your advice. Commented Dec 21, 2012 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.