How to move stacked columns up (using bootstrap but any css will do)


Tags: html5,css3,twitter-bootstrap-3

Problem :

Looking to have column [3] move up when [2] is taller than [1]

[1][2]

[3][4]

Here is a bootply of the layout : http://www.bootply.com/KbAf8UOk9c

There is empty space between column [1] and [3] and I would like to have column [3] move up.

(just fyi, column [4] is already styled to move up under column [2])

thank you

UPDATE: In mobile view, the columns need to stack (same as the booply):

[1]

[2]

[3]

[4]

UPDATE 2 I am still working on solving this issue, and a solution has not yet been figure out.



Solution :

Unfortunately there was no working solution submitted (I was hoping for a css only solution). I ended up finding a solution using jQuery masonry: http://masonry.desandro.com/

If you prefer, you can write your own custom JavaScript to handle your specific needs (if the full masonry logic is overkill)... but it seems JavaScript logic is required to compensate for the "gap(s)"... Here is a working sample of the original bootply example: http://www.codeply.com/go/mEdTy6E6mp Tip: For the masonry logic, you can set your columnWidth value to be the smallest column width/class - for me that was .col-md-4 - when the column widths are not all the same.


    CSS Howto..

    How to make a header ribbon responsive

    How to wrap table cell at a maximum width in full width table

    How to get minimal jQuery slideshow to slide properly?

    How to find a unique identifier using CSS for a class

    how to add css for div tag

    How to make input placeholder text not opaque when the text field background is opaque

    How to animate two divs in html / css to make a semi-circle transition?

    How to specify size of thumbnails for photos that are hosted externally?

    background image not showing on nested

    How to position elements with flex [duplicate]

    how should i set scrollbar properties in css

    How detect first div clicked when all of them absolute

    How to change styling of a specific div onhover of another element when divs share an id

    How would I go about having placeholder divs that are then “overwritten” later with PHP?

    How to create this border styles in HTML/CSS? [closed]

    How to use CSS to horizontally fill the width of page with HTML menu headers?

    How to fill the anchor element's height to 100% in html?

    How can I add a red border to this box (an a tag) when the mouse is on (hover) the box?

    How to remove the extra space between two span elements?

    How to get CSS table-cell to 100% for responsive design [closed]

    How to use px and % in the same layout like this

    How to solve CSS dropdown border error?

    How do I get Aptana Plugin for Eclipse to validate against CSS3, rather than CSS2?

    How to align elements properly using CSS

    How to center a Dijit Select widget?

    How to make outer div inherit height of inner, non-floated divs?

    HTML/CSS/JAVASCRIPT : How to move an element and not show scrollbars

    How to change pseudo class property?

    How to scale html font size in Bootstrap 4 without breaking responsive navbar

    How to get css class name using Selenium?