CODEWITHSUNDEEP
csshtmltwitter-bootstraptwitter-bootstrap-3
Hannes
Hannes

Reputation: 107

Complex grid with responsive image dont't work

i try to create a layout with a complex grid (for me) and in the middel a image with a max-width option. The layout should be fully responsive and i have to use Bootstrap 3.

I have the following solution right know:

<div class="container">
    <div class="row" style="margin-bottom:50px; display: flex;flex-wrap: wrap;min-height:600px;">
        <div class="col-md-3" style="background: #xccc; margin-bottom:-15px;padding:7px;">
            <p>
                Should be at top ...
            </p>            
            <div style="position:absolute;bottom:0;">
                <p>Lorem ipsum (bottom)</p>
                <p>
                2016-2018<br />
                Lorem ipsum dolor...<br />
                123<br /><br />
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                </p>
            </div>
        </div>
        <div class="col-md-7 text-center">
            <img src="https://dummyimage.com/600.png/09f/fff" class="img-responsive center-block" id="img" style="max-width:600px;" />
        </div>
        <div class="col-md-2" style="background: #ccc;">
            <p>
                Should be at top ...
            </p>
            <p>
                Schould be at bottom <br />
                <img src="https://dummyimage.com/squarebutton/09f/fff" class="img-responsive" style="width:70px;float:left;margin-right:5px;" />
                <img src="https://dummyimage.com/squarebutton/09f/fff" class="img-responsive" style="width:70px;" />
            </p>
        </div>

    </div>
</div>

http://jsfiddle.net/1m6gw2dt/

This works only at desktop but if i resize the window the columns doesn't reorder for the mobilde view. Also the image reacts not to the responsive option.

And i don't know if my code example has not the best structure for my requirements?

Edit This is just an experiment, it does not have to be < p >. The result Mobile should be a normal behavior that the left area appears first, then the picture and at the end the right area.

Edit 2 To clarify, I have inserted a picture

Thank you very much for help.

Upvotes: 0

Views: 58

Answers (1)

SpaceBeers
SpaceBeers

Reputation: 13947

I'm not sure this is exactly what you need but if you want to push to the top and the bottom then flexbox is the way to go.

https://jsbin.com/bijekaqoji/edit?html,css,js,output

<div class="big-boy-box"> <p>I'm at the top</p> <p>I'm at the bottom</p> </div>

.big-boy-box { height: 500px; border: 5px solid red; display: flex; flex-direction: column; justify-content: space-between; }

You can remove this through media queries as and when you want to.

Upvotes: 1

Related Questions