I have try to put image in the right side and text in the left side, but for some reason its the opposite and I don't know why, By the way how can I shrink it to fit the "Can you see the simplicity behind the logo?" size.
The column you want on the left should come first. So in this case the text.
<div class="row"> <div class="col-xs-6"> [text] </div> <div class="col-xs-6"> [image] </div> </div>
You have the img-responsive class on the logo so it will scale depending on the viewport size. You also have a inline style with "height: 200px". Lowering this number would decrease the size of the logo.