Get a specific sibling using CSS pseudo selectors

Question

I read many examples on how to style specific siblings with pseudo selectors such as

http://andr3.net/blog/post/142

http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ Can CSS determine the number of children that an element has?

But the problem I am facing, especially. I am working on a grid that can contain up to 8 div (col) inside. Their width is automatically based on the class you apply.

Here is the full demo version of http://fiddle.jshell.net/6Wb6W/1/show/light/

this is css and markup http://jsfiddle.net/6Wb6W/1/

Now at browser width 979px I want to reset (moving under make 100% wide);

3rd column in 3 column grid and make it 100% wide 
5th column in 5 column grid and make it 100% wide 

I used to do this through js and count how many columns are inside the row, and change the width or apply a new class to the one you need, but I would like to do this only with css.

I tried with pseudo-classes nth:childon 3 or 5 grid columns. Any combination I messed up the 6th and 8th column of the grid. Tested all the possible options that I could think of here http://css-tricks.com/examples/nth-child-tester/# and could not find a solution.

I do not want to add any additional div identifier names and configure them that way. There have already been such "solutions" and js mambo jumbo in the past, but I would like to get rid of all this and use only pure css.

Any help is appreciated.

: Thnx to chandu . http://fiddle.jshell.net/6Wb6W/8/show/light/ , , . YJSG 2.0 http://www.youjoomla.com/yjsg-framework-blog/yjsg-v2-0-0-white-paper.html

Answer 1

, .

display: none; css 3- 3- div 5- 5- div 979px

@media screen and (max-width: 979px) {

    [class*='yjsg-col-'] {
        width: 50%;
    }
    .yjsg-col-1 {
        width:100%;
    }
    [class*='yjsg-col-1-']:nth-child(odd):last-child{
    /*color:red;*/
    display:none;
  }
}

Fiddle

. , ,

Answer 2

, " " ...!; -)

, , nth-child().

979px ;

3rd column in 3 column grid and make it 100% wide
5th column in 5 column grid and make it 100% wide

@media screen and (max-width: 979px) {
    ...
    .yjsg-col-1-3:nth-child(3) {
        width:100%;
    }
    ...
    .yjsg-col-1-5:nth-child(5) {
       width:100%;
   }

, drop!?
"/ " , display: none; CSS.

CSS-TRICKS, : : -

JSFiddle