I am trying to find a way to resize grid columns. It's ahrd to explain so i've atached a picture of what i would like to achieve 
basicly when i resize browser window, grid changes so the last element in column gets moved to new row. Can this be done with bootstrap or any other technology?
A picture is worth a thousand words
Bootstrap is having built in classes you can do it with them. for the above picture you showed try the following code and dont forget to include bootstrap css. which you can get from getBootstrap website. i am supposing there are 6 boxes in a row. you can even handle then with the help of @media query in css. try exploring @media query behavior on different screen widths and different type of devices like ipad tablets and phone etc.
<html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="row"><!-- row is a built in class of bootstrap and each row has 12 column --> <!-- give each column a width of 2 columns --> <!-- col-lg-* is for large screens but include all type of classes for all type of screens--> <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;> Box 1 </div> <!-- col-md-* is for medium size screens but include all type of classes for all type of screens--> <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> Box 2 </div> <!-- col-sm-* is for small screens but include all type of classes for all type of screens--> <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> Box 3 </div> <!-- col-xs-* is for extra small screens but include all type of classes for all type of screens--> <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> Box 4 </div> <!-- col-xl-* is for extra large screens but include all type of classes for all type of screens--> <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> Box 5 </div> <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> Box 6 </div> </div> </body> </html> 
Unless I'm missing something in your question, this is exactly what Bootstrap is for. You could come up with your own solution, but it's so easy to start with Bootstrap.
Other responsive frameworks exist, but I recommend Bootstrap
