Changing Bootstrap's responsiveness - html

Question

First of all, I am really new to Bootstrap so please excuse my newbiness.
The problem is that I am trying to create some sort of a thread list and when I shrink the width of the page all the contents keep moving down one another.
This is what I want:
http://img04.imgland.net/CmWzwDR.png
Things just becoming smaller and nothing going out of place
This is what happens:
http://img04.imgland.net/hNKc_Ok.png
Ya its pretty bad
Do you guys know of any way to fix this problem? I don't have to use bootstrap, but I thought it would be easiest.
Thanks
<div style={{marginTop: "80px", marginLeft: "20px", marginRight: "20px"}}>
<div style = {{height: "80px", marginBottom: "10px", padding: "1px 1px 1px 1px", border: "2px solid #000000"}} class="row-fluid" >
<div class = "col-xs-2" style= {{width: "20px", float: "left"}}>
<div class = "row" >
<img src="img/upvote.png" />
<img src="img/downvote.png" />
</div>
</div>
<div class = "col-xs-2" style={{width: "100px", marginLeft: "0px", padding: "0px 0px 0px 0px", float: "left"}}>
<img src={thumbnail} style={{height: "80px", width: "100px"}}/>
</div>
<div class = "col-xs-8" style= {{marginLeft: "10px"}}>
<div class = "row">
<h3 style = {{height: "50px", textAlign: "left", marginTop: "0px", marginBottom: "0px", padding: "0px 0px 0px 0px"}}> {title} </h3>
<p style = {{height: "30px", textAlign: "left", marginBottom: "0px", padding: "0px 0px 0px 0px", overflow: "hidden"}}> {desc} </p>
</div>
</div>
</div>
</div>
Currently this is my site on desktop screen:
img.imgland.net/5VBEme.png
And then this is what it would look like on mobile: img02.imgland.net/cr-MUQd.png

Answer 1

Without explicit samples of your code, I assume it has something to do with the grid prefix you are using. Take a look at http://getbootstrap.com/css/#grid-options which shows the 4x different prefixes:
.col-xs-*
.col-sm-*
.col-md-*
.col-lg-*
To control the behaviour of your layout on mobile resolutions use the .col-xs-* class. Bootstrap documentation gives a great example: http://getbootstrap.com/css/#grid-example-mixed
The above exmaple shows how to mix classes to have different behaviour on different resolutions:
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
Using this code will have your columns start at 50% wide on mobile and bump up to 33.3% wide on desktop. Using these combinations allows you to have quite a fine control over layout across all container resolutions.
EDIT BASED ON CODE SUPPLIED:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">
<img src="img/upvote.png" />
<img src="img/downvote.png" />
</div>
<div class="col-xs-2">
<img src="#" />
</div>
<div class="col-xs-8">
<h3>{title}</h3>
<p>{desc}</p>
</div>
</div>
</div>
Pay close attention to the Bootstrap docs which show how to use containers and the grid system. I would also take note of the Column nesting as this is a great way to show columns contained within columns: http://getbootstrap.com/css/#grid-nesting
EDIT BASED ON SECONDARY QUESTION
Use the element inspector function in your browser to have a detailed look at your CSS classes and what is creating the padding between columns. You can then call your own custom.css file (or re-compile if you are competent with Less) which overrides the default Bootstrap styling. This will remove the left and right padding in the example code I have supplied:
.col-xs-2, .col-xs-8 {
padding-right: 0px;
padding-left: 0px;
}