Databases
StackOverflow2013
Postsdbo
POBootstrap Responsive mobile layout reordering
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBootstrap Responsive mobile layout reordering
    primarykey
    data
    text
    <p>I'm using Bootstrap to create a responsive website with a lot of variable-height content in a two-column grid. Currently everything is fine functionally, but I'd like to get rid of the ugly white space between rows that occurs when the two items in one row are of a different height. I can easily do this by just having two span6 divisions and independent rows in each one, but the problem is that Bootstrap's grid stacking for small displays will stack all of the left column above the right column, whereas the information is supposed to flow left to right, <em>then</em> top to bottom.</p> <p><br> For solutions I've found the following threads:</p> <ul> <li><a href="https://stackoverflow.com/questions/12570559/is-it-possible-to-create-a-pinterest-like-layout-with-bootstrap-only">Is it possible to create a pinterest-like layout with Bootstrap only?</a></li> <li><a href="https://stackoverflow.com/questions/12902555/bootstrap-how-to-change-the-order-of-div-in-fluid-row">Bootstrap: How to change the order of div in fluid-row?</a></li> </ul> <p>...as well as a few other obscure answers, but none of them work for me as I'd like to make no server-side changes to how pages are rendered; rather, I want to see if there is a way for me to solve this issue by modifying <strong>only</strong> the HTML, CSS, and JS, that is I want to find a solution that concerns Bootstrap entirely. I'm open to any additions to the HTML, CSS, and JS, but like I said, nothing server-side.</p> <p><br> I've whipped up a table that visualized what I'm working with, what the problem is, and what I'd like to accomplish. See it at <a href="https://i.imgur.com/AAl9ZBu.png" rel="nofollow noreferrer">http://i.imgur.com/AAl9ZBu.png</a>.</p> <p><br> Thanks so much for your help.</p> <p><br><br> <strong>UPDATE:</strong> I've come up with a fairly simple idea to fix this: Use the two-column paradigm on the solution that fixes the desktop layout but breaks the mobile layout, with duplication on every second grid item and toggling display between the two of them. For example, a four-item grid would have items 1, 2, 3, and 4 in the left column, with items 2 and 4 set to display:none, and the right column contains items 2 and 4. When @media(max-width:767px) becomes true, items 2 and 4 in the left column toggle on and display:none is applied to the entire left column.</p> <p>This is probably the least efficient solution possible, so I'd still love to read your solutions.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USimogennnnnnnnnnnnnnnnnnnnnnnnn
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COplease provide the sample in http://jsbin.com/ or http://jsfiddle.net/
      singulars
      1. POBootstrap Responsive mobile layout reordering
      1. USDiode
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload