• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 138
  • Last Modified:

Change column size on different media query (bootstrap)

Hello,
I do have this code

								<div  class="col-xs-8 column SHeadD" >
								</div>
								<div class="col-xs-2 column SHeadL">
								</div>
								<div class="col-xs-2 column SHeadL">
								</div>

Open in new window


I do need to change column size on 767PX media i do need it to show like this

								<div  class="col-xs-6 column SHeadD" >
								</div>
								<div class="col-xs-3 column SHeadL">
								</div>
								<div class="col-xs-3 column SHeadL">
								</div>

Open in new window



Can anyone help me practically how to do that ?
0
jaylab2
Asked:
jaylab2
1 Solution
 
Marco GasiFreelancerCommented:
You can't change the markup, but you can change columns' sizes overwriting the default ones on your meddia-queries rules

@media only screen and (max-width: 30em) {
    .col-xs-8{
        width: ...
        max-width: ...
    }	
}

Open in new window


But you could do some test mixing the columns sizes directly in the markup:

	<div  class="col-sm-8 col-xs-6 column SHeadD" >
	</div>
	<div class="col-sm-2 col-xs-3 column SHeadL">
	</div>
	<div class="col-sm-2 col-xs-3 column SHeadL">
	</div>

Open in new window


and see if this makes sense for you...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now