Bootstrap grid system issue on devices below 768px - html

Question

I'm trying to create a responsive webpage with bootstrap, but the problem is that the grid system of bootstrap doesn't work right in class="col-x" i have given 2 elements. col-md-xx , col-lg-xx and col-sm-xx are working fine as i want. This is how it look like right now :
And this is what I want it to be :
**Summary :
I want those blue and green buttons come in front of the image.
image is in left side and buttons should be in the right side.
**
my source :
* {
text-decoration: none !important;
}
.header {
padding: 16px 58px 21px 58px;
}
.logoDiv {
float: left;
}
.logoDiv img {
float: left;
}
.TopBtns {
float: right;
}
.buybtn {
margin-bottom: 5px;
margin-top: 10px;
width: 300px;
}
.usersbtn {
width: 300px;
}
.TopBtns {
float: right;
}
/* Start Search Bar */
.searchForm {
margin-top: 20px;
direction: ltr !important;
text-align: center;
}
.dropdown-menu {
direction: ltr !important;
}
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
/* End Search Bar */
.navbar {
background-color: #fdfdfd;
-moz-box-shadow: 0 2px 8px rgb(189, 189, 189);
-webkit-box-shadow: 0 2px 8px rgb(189, 189, 189);
box-shadow: 0 2px 8px rgb(189, 189, 189);
border-radius: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
}
#media screen and (max-width: 1172px){
#adv-search {
width: 400px;
}
}
#media screen and (max-width: 992px){
#adv-search {
width: 300px;
}
.header {
padding: 16px 32px 21px 32px;
}
}
#media screen and (max-width: 768px){
#adv-search {
width: 100%;
}
.searchForm {
width: 100%;
float: none;
}
.TopBtns {
float: none;
}
.header {
padding: 16px 16px 21px 16px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="logoDiv col-lg-3 col-md-3 col-sm-3 col-6">
<img src="https://image.ibb.co/mp0505/logo.png"/>
</div>
<div class="TopBtns col-lg-3 col-md-3 col-sm-3 col-2">
<div class="btn-group-justified btn-group-success">
<div class="dropdown buybtn">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-shopping-bag"></i>
سلام سلام
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropdown header 1</li>
<li>HTML</li>
</ul>
</div>
<div class="dropdown usersbtn">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-user"></i>
سلام سلام
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropdown header 1</li>
<li>HTML</li>
</ul>
</div>
</div>
</div>
<div class="searchForm col-lg-6 col-md-6 col-sm-6 col-12">
<div class="input-group" id="adv-search">
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"
aria-hidden="true"></span></button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author</label>
<input class="form-control" type="text"/>
</div>
<div class="form-group">
<label for="contain">Contains the words</label>
<input class="form-control" type="text"/>
</div>
</form>
</div>
</div>
</div>
</div>
<input type="text" class="form-control" placeholder="Search for snippets"/>
</div>
</div>
</div>
</div>
</div>

Answer 1

Try to change your col-6 and col-2 classes to col-xs-6. You could also read more how bootstrap grid works. And also to our buttons, avoid using fix width. Just remove it.
Update: Add btn-block to your buttons if you want it to occupy the
whole column. Also please separate your search bar to another row.
* {
text-decoration: none !important;
}
.header {
padding: 16px 58px 21px 58px;
}
.logoDiv {
float: left;
}
.logoDiv img {
float: left;
}
.TopBtns {
float: right;
}
.buybtn {
margin-bottom: 5px;
margin-top: 10px;
}
.TopBtns {
float: right;
}
/* Start Search Bar */
.searchForm {
margin-top: 20px;
direction: ltr !important;
text-align: center;
}
.dropdown-menu {
direction: ltr !important;
}
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
/* End Search Bar */
.navbar {
background-color: #fdfdfd;
-moz-box-shadow: 0 2px 8px rgb(189, 189, 189);
-webkit-box-shadow: 0 2px 8px rgb(189, 189, 189);
box-shadow: 0 2px 8px rgb(189, 189, 189);
border-radius: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
}
#media screen and (max-width: 1172px){
#adv-search {
width: 400px;
}
}
#media screen and (max-width: 992px){
#adv-search {
width: 300px;
}
.header {
padding: 16px 32px 21px 32px;
}
}
#media screen and (max-width: 768px){
#adv-search {
width: 100%;
}
.searchForm {
width: 100%;
float: none;
}
.TopBtns {
float: none;
}
.header {
padding: 16px 16px 21px 16px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="logoDiv col-lg-3 col-md-3 col-sm-3 col-xs-6">
<img src="https://image.ibb.co/mp0505/logo.png"/>
</div>
<div class="TopBtns col-lg-3 col-md-3 col-sm-3 col-xs-6 text-right">
<div class="btn-group-justified btn-group-success">
<div class="dropdown buybtn">
<button class="btn btn-success btn-block dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-shopping-bag"></i>
سلام سلام
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropdown header 1</li>
<li>HTML</li>
</ul>
</div>
<div class="dropdown usersbtn">
<button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-user"></i>
سلام سلام
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Dropdown header 1</li>
<li>HTML</li>
</ul>
</div>
</div>
</div>
<div class="searchForm col-lg-6 col-md-6 col-sm-6 col-12">
<div class="input-group" id="adv-search">
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"
aria-hidden="true"></span></button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author</label>
<input class="form-control" type="text"/>
</div>
<div class="form-group">
<label for="contain">Contains the words</label>
<input class="form-control" type="text"/>
</div>
</form>
</div>
</div>
</div>
</div>
<input type="text" class="form-control" placeholder="Search for snippets"/>
</div>
</div>
</div>
</div>
</div>

Answer 2

Put your image and the group of buttons on a div and use flexbox.
After set up your image to float:left and the group of buttons to float: right.
It should work ;)

Answer 3

use this
<div class="logoDiv col-sm-3 col-xs-6"></div>
<div class="TopBtns col-sm-3 col-xs-2"></div>
instead of
<div class="logoDiv col-lg-3 col-md-3 col-sm-3 col-6"></div>
<div class="TopBtns col-lg-3 col-md-3 col-sm-3 col-2"></div>