Balsamiq Community Discussion

Best way to redistribute large high level desktop wireframe across 3 smaller Bootstrap grids?


I’m creating a set of mockups for a responsive page. I’ve completed one high level mockup for a 1600 px desktop and now need to redistribute it over the three smaller viewport grids. Is there a best or faster method of adapting the 1600 px wireframe to the smaller sizes or do I need to manually resize and adapt every section and element?

Thanks a bunch!



@joem you’ll need to adapt and resize the controls over each wireframe. You can do some resizing of groups, but that will probably have mixed results in terms of getting the pieces to fit.

There’s some ideas in this article I wrote a few years back about approaching wireframing for different devices, particularly at the bottom of the article. But there’s manual editing involved.


Hi Mike, thanks, that’s pretty much what I figured from looking over the available menu items and from what I could see in a few tutorial videos that deal with bootstrap. I’ve already read your tutorial and it was very helpful. Thanks again for the reply!