Put the knife down and take a green herb, dude. (c) Ruffin Bailey 2001-2021

Tell you what, being an independent shop has its drawbacks. One is that it's hard to be good at design and zeroes and ones. There are certainly people great at both, but it's much fewer than those who are really good at just one or the other. That's nearly a truism.

That means it's taken me days to get my website looking presentable over and above my cheaping out and using a template for the site.

One of the biggest issues for me was trying to get a grid of application features to look good in both desktop and mobile modes. I've got a pretty common set of three features and an image for each. On the desktop, the bootstrap grid arrangement is simple enough:

Desc 1	Desc 2	Desc 3
Image 1	Image 2	Image 3

But when I go to mobile, I want the order to change fairly drastically.

What I want	What Bootstrap Does by Default when small viewpoint
Image 1	Desc 1
Desc 1	Desc 2
Image 2	Desc 3
Desc 2	Image 1

...

Probably makes more sense with numbers...

1	2	3
4	5	6

Changes into...

What I want	What Bootstrap Does by Default
4	1
1	2
5	3
2	4

...

That's kind of an extreme change.

First attempted solution

I wasted a lot of time trying bootstrap push and pull. Look at this answer, for instance.

So basically in a 3 column layout of any web page the "Main Body" appears at the "Center" and in "Mobile" view the "Main Body" appears at the "Top" of the page. This is mostly desired by everyone with 3 column layout.

<div class="container">
    <div class="row">
        <div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
        <h2>This is Content</h2>
        <p>orem Ipsum ...</p>
        </div>

        <div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
        <h2>This is Left Sidebar</h2>
        <p>orem Ipsum...</p>
        </div>


        <div id="sidebar-right" class="col-lg-4 col-sm-6">
        <h2>This is Right Sidebar</h2>
        <p>orem Ipsum.... </p>
        </div>
    </div>
</div>

Look at the first col-sm-12 class. That means the next two divs end up on new rows, right? So I can count on pulling my images back a row or two, and pushing my descriptions to fit, right?

Wrong. After fiddling around a while, pushes seem to simply push off to the right of the viewable row. And this question pretty much confirms it.

Second solution

Since that question suggests that we can't push and pull, I figured I'd take one of these more complicated options. They boil down to...

Hide at different view "grid tiers"
Use JavaScript event handlers to catch resizing

The first makes more sense I think, though you end up having to duplicate code.

I ended up with code like what's below. What's important to note is that the first row is hidden-sm-down, so it's not visible in small or smaller tiers. Then I've got extra lines -- the description text -- repeated in the next row in divs that are hidden-md-up.

It does get the effect I want, even if it's not DRY.

<div class="row hidden-sm-down">
    <div class="feature-desc col-md-4 ">
        Tools to help you learn Markdown. <!--- <<< This'll be repeated -->
    </div>
    <div class="feature-desc col-md-4">
        Keyboard shortcuts once you're a pro. <!-- and this. -->
    </div>
    <div class="feature-desc col-md-4">
        Easy Actions make editing effortless. <!-- and this too. -->
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <img class="col-image" src="./resources/toolbar350x55.png" alt="toolbar showing a few of MarkUpDown's commands" />
        <div class="hidden-md-up"> <!-- \/\/\/ =====REPEATED!!!===== -->
            <ul><li>Tools to help you learn Markdown.</li></ul>
        </div>
    </div>
    <div class="col-md-4">
        <img class="col-image" src="./resources/keystrokes.gif" alt="Just a few of MarkUpDown's keystroke commands" />
        <div class="hidden-md-up"> <!-- \/\/\/ =====REPEATED!!!===== -->
            <ul><li>Keyboard shortcuts once you're a pro.</li></ul>
        </div>
    </div>
    <div class="col-md-4">
        <img class="col-image" src="./resources/clipboardUrlInsert.gif" alt="Animation of smart clipboard insertion with urls" />
        <div class="hidden-md-up"> <!-- \/\/\/ =====REPEATED!!!===== -->
            <ul><li>Easy Actions make editing effortless.</li></ul>
        </div>
    </div>
</div>

<div style="height:15px" class="row hidden-sm-down">
    &nbsp;
</div>

I don't like it, though I don't even know that it isn't what a bootstrap master would do to get the same effect. I do know that any idealistic setup seems to go completely out of the window once your use case gets complicated enough, whether with conventional code or with CSS.

Chartige

Here's a chart of the different "down" and "up" classes to hide your stuff, though it's from the version 4 alpha...

Extra small devices Portrait phones (<544px) Small devices Landscape phones (≥544px - <768px) Medium devices Tablets (≥768px - <992px) Large devices Desktops (≥992px - <1200px) Extra large devices Desktops (≥1200px)

.hidden-xs-down Hidden Visible Visible Visible Visible

.hidden-sm-down Hidden Hidden Visible Visible Visible

.hidden-md-down Hidden Hidden Hidden Visible Visible

.hidden-lg-down Hidden Hidden Hidden Hidden Visible

.hidden-xl-down Hidden Hidden Hidden Hidden Hidden

.hidden-xs-up Hidden Hidden Hidden Hidden Hidden

.hidden-sm-up Visible Hidden Hidden Hidden Hidden

.hidden-md-up Visible Visible Hidden Hidden Hidden

.hidden-lg-up Visible Visible Visible Hidden Hidden

.hidden-xl-up Visible Visible Visible Visible Hidden

Labels: coding, css, indie