How to handle the html and css of one side image and other side content and vice versa


Tags: html,css3

Problem :

I am working on project and in my design there is one row and in first col there is image and in second col there is content.in next row there is the content first and then a col for image.I also attched its design image here how to handle it.I tried the bootstrap pull push cols but i am confused can i use this ,if i use this then how it will cover in responsive.

 <div class="hundred-percent-width">
                                <div class="ad-col-row ad-odd-row ad-margin-bottom-50">
                                    <div class="col-xs-7 col-sm-7 col-md-6 col-lg-7">
                                       <div class="feature-box-thumb border-right">
                                        <img src="<?php echo get_template_directory_uri(); ?>/images/shop-v2-1.jpg" alt="feature-block" width="1047" height="596" /></div>
                                    </div>
                                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                                        <div class="ad-pad-sq">
                                            <div class="ad-sec-title ad-uline-left ad-margin-bottom-20">
                                                <h4>VEHICLE NAME J33D3</h4>
                                            </div>
                                            <!--ad-sec-title closed-->
                                            <div class="ad-sec-content ad-margin-bottom-20">
                                                <span class="bold-heading">features</span>
                                                <ul class="regular-text ad-margin-left-30">
                                                    <li>
                                                        <span>Model: JVC-2255L</span>
                                                    </li>
                                                    <li>
                                                        <span>Brand: JVC Inc.</span>
                                                    </li>
                                                    <li>
                                                        <span>  Capecity : 200tn</span>
                                                    </li>
                                                    <li>
                                                        <span>   Power: 3000Hp</span>
                                                    </li>
                                                    <li>
                                                        <span> Engine: v8</span>
                                                    </li>
                                                    <li>
                                                        <span>  Average: 2kmpl</span>
                                                    </li>
                                                    <li>
                                                        <span> Services: world wide</span>
                                                    </li>
                                                </ul>
                                            </div>
                                            <!--ad-sec-content-->
                                            <div class="ad-sec-content ad-margin-bottom-20">
                                                <span class="bold-heading">Description:</span>
                                                <p>We will assign a project manager, field superintendent, engineer and other staff members as required to effectively manage the construction process.</p>
                                            </div>
                                            <!--ad-sec-content-->
                                            <div class="">
                                                <div class="ad-left-float ad-margin-right">
                                                    <a class="button ad-download-link btn-small" href="#/"><i class="fa fa-download button__icon"></i><span><i style="margin-right:20px;" class="fa fa-file-pdf-o"></i>DOWNLOAD Full  brochure</span></a>
                                                </div>
                                                <!--ad-grey-bdr lcosed-->
                                                <div class="ad-left-float btn-xs">
                                                    <a href="#/" class="button button-by-default btn-small">GET A QUOTE</a>
                                                </div>
                                                <!--ad-red-btn closed-->
                                            </div>
                                        </div>
                                        <!--vehicle-content closed-->
                                    </div>
                                </div>
                                <!--ad-col-row-closed-->
                            </div>
                            <!--hundred-percent-width closed-->
                            <div class="hundred-percent-width">
                                <div class="ad-col-row ad-even-row ad-margin-bottom-50">
                                    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 interchange-first">
                                       <div class="feature-box-thumb border-left"><img src="<?php echo get_template_directory_uri(); ?>/images/shop-v2-2.jpg" alt="feature-block" width="1047" height="596" /></div>
                                    </div>
                                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-lg-offset-1 interchange-second">
                                        <div class="ad-pad-sq">
                                            <div class="ad-sec-title ad-uline-left ad-margin-bottom-20">
                                                <h4>VEHICLE NAME J33D3</h4>
                                            </div>
                                            <!--ad-sec-title closed-->
                                            <div class="ad-sec-content ad-margin-bottom-20">
                                                <span class="bold-heading">features</span>
                                                <ul class="regular-text ad-margin-left-30">
                                                    <li>
                                                        <span>Model: JVC-2255L</span>
                                                    </li>
                                                    <li>
                                                        <span>Brand: JVC Inc.</span>
                                                    </li>
                                                    <li>
                                                        <span>  Capecity : 200tn</span>
                                                    </li>
                                                    <li>
                                                        <span>   Power: 3000Hp</span>
                                                    </li>
                                                    <li>
                                                        <span> Engine: v8</span>
                                                    </li>
                                                    <li>
                                                        <span>  Average: 2kmpl</span>
                                                    </li>
                                                    <li>
                                                        <span> Services: world wide</span>
                                                    </li>
                                                </ul>
                                            </div>
                                            <!--ad-sec-content-->
                                            <div class="ad-sec-content ad-margin-bottom-20">
                                                <span class="bold-heading">Description:</span>
                                                <p>We will assign a project manager, field superintendent, engineer and other staff members as required to effectively manage the construction process.</p>
                                            </div>
                                            <!--ad-sec-content-->
                                            <div class="">
                                                <div class="ad-left-float ad-margin-right">
                                                    <a class="button ad-download-link btn-small" href="#/"><i class="fa fa-download button__icon"></i><span><i style="margin-right:20px;" class="fa fa-file-pdf-o"></i>DOWNLOAD Full  brochure</span></a>
                                                </div>
                                                <!--ad-grey-bdr lcosed-->
                                                <div class="ad-left-float btn-xs">
                                                    <a href="#/" class="button button-by-default btn-small">GET A QUOTE</a>
                                                </div>
                                                <!--ad-red-btn closed-->
                                            </div>
                                        </div>
                                        <!--vehicle-content closed-->
                                    </div>
                                    <!--vehicle-content closed-->
                                </div>
                            </div>
                            <!--hundred-percent-width closed-->

                            <div class="hundred-percent-width">
                                <div class="ad-col-row ad-odd-row ad-margin-bottom-50">
                                    <div class="col-xs-7 col-sm-7 col-md-6 col-lg-7">
                                        <div class="feature-box-thumb border-right"> <img src="<?php echo get_template_directory_uri(); ?>/images/shop-v2-1.jpg" alt="feature-block" width="1047" height="596" /></div>
                                    </div>
                                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                                        <div class="ad-pad-sq">
                                            <div class="ad-sec-title ad-uline-left ad-margin-bottom-20">
                                                <h4>VEHICLE NAME J33D3</h4>
                                            </div>
                                            <!--ad-sec-title closed-->
                                            <div class="ad-sec-content ad-margin-bottom-20">
                                                <span class="bold-heading">features</span>
                                                <ul class="regular-text ad-margin-left-30">
                                                    <li>
                                                        <span>Model: JVC-2255L</span>
                                                    </li>
                                                    <li>
                                                        <span>Brand: JVC Inc.</span>
                                                    </li>
                                                    <li>
                                                        <span>  Capecity : 200tn</span>
                                                    </li>
                                                    <li>
                                                        <span>   Power: 3000Hp</span>
                                                    </li>
                                                    <li>
                                                        <span> Engine: v8</span>
                                                    </li>
                                                    <li>
                                                        <span>  Average: 2kmpl</span>
                                                    </li>
                                                    <li>
                                                        <span> Services: world wide</span>
                                                    </li>
                                                </ul>
                                            </div>
                                            <!--ad-sec-content-->
                                            <div class="ad-sec-content ad-margin-bottom-20">
                                                <span class="bold-heading">Description:</span>
                                                <p>We will assign a project manager, field superintendent, engineer and other staff members as required to effectively manage the construction process.</p>
                                            </div>
                                            <!--ad-sec-content-->
                                            <div class="">
                                                <div class="ad-left-float ad-margin-right">
                                                    <a class="button ad-download-link btn-small" href="#/"><i class="fa fa-download button__icon"></i><span><i style="margin-right:20px;" class="fa fa-file-pdf-o"></i>DOWNLOAD Full  brochure</span></a>
                                                </div>
                                                <!--ad-grey-bdr lcosed-->
                                                <div class="ad-left-float btn-xs">
                                                    <a href="#/" class="button button-by-default btn-small">GET A QUOTE</a>
                                                </div>
                                                <!--ad-red-btn closed-->
                                            </div>
                                        </div>
                                        <!--vehicle-content closed-->
                                    </div>
                                </div>
                                <!--ad-col-row-closed-->
                            </div>
                            <!--hundred-percent-width closed--


Solution :

Working with a lot of assumptions here, but since you said the content is dynamic, hope this helps:

 <?php
 //Assuming you have a table ( let's call it "posts") with at least the following 3 fields : id , img_name , content
 //Assuming you have some sort of DB connector  ( I'll call it $dbc )
 //This is just a general example, adapt it to your own mysql and php

 $q = 'SELECT * FROM posts ORDER by id';
 $r = mysqli_query($dbc, $q);
 $i = 0;

 if(mysqli_num_rows($r) > 0){
 while($row = mysqli_fetch_assoc($r)){

 if ($i % 2 == 0) { ?>

   <div style="width: 60%; float: left;" > <img src="path_on_your_host/<?php echo $row['img_name']; ?>" ></div>
   <div style="width: 30%; position: relative"> <p> <?php echo $row['content']; ?></p></div>
   <?php
} else { ?>

   <div style="width: 30%; float: left;"> <p> <?php echo $row['content']; ?></p></div>
   <div style="width: 60%; position: relative" > <img src="path_on_your_host/<?php echo $row['img_name']; ?>" ></div>
  <?
}

$i++;
}
}

?>

Didn't tested the code..possible to contain some errors, but the idea is OK.


    CSS Howto..

    AngularJS - how to set css class for the custom directive?

    How can I center my text on top of an image, given that it's responsive?

    How can I get my coloured Bootstrap popover to render properly?

    How to place HTML elements over inline SVG

    Single
    with Box-Shadow = 6 cicles. How it works?

    How to vertically center inline elements in CSS

    How to make a moving dashed border with CSS?

    Possible to code a search box that searches for a specific tag in a div and then shows it / hides others? [closed]

    How to apply CSS styling to dynamically generated list (within mCustomScrollbar container)?

    My div box isn't showing up, what am I doing wrong? [closed]

    Is there a limit to how deep an HTML document or CSS tree can be?

    How to make page layout responsive for every successive little change in window size?

    Show warnings screen resolution

    How to add hover text on D3 disign?

    How to vertically center div in floated div?

    How to target last 3 elements in a container using CSS :nth-last-child(n)?

    How to make CSS Animation reverse on hover-out?

    CSS? How is this arrow made?

    How to override a CSS class within a content div

    Stylized HR is not showing properly in IE

    How do I detect the user’s browser and apply a specific CSS file?

    making div inside div and put it right-bottom corner how?

    How do I give one stylesheet precedence over the other with Rails?

    How to get content of a specific css column

    How to insert a line break
    after every
    tag?

    How to Center CSS Tabs

    how can assign left of div to left of screen when margin set to auto?

    How to restore CSS style to its super class

    How to edit the element.style css?

    How to override bootstrap styles?